所有浏览器 通用
height: 100px;
IE6 专用
_height: 100px;
IE6 专用
*height: 100px;
IE7 专用
*+height: 100px;
IE7,FF 共用
height: 100px !important;
程序代码
- height:100px;
- *height:120px;
- _height:150px;
下面我简单解释一下各浏览器怎样理解这三个属性:
在 FF 下, 第 2,3 个属性 FF 不认识, 所以它读的是 height:100px;
在 IE7 下, 第三个属性 IE7 不认识, 所以它读第 1,2 个属性, 又因为第二个属性覆盖了第一个属性, 所以 IE7 最终读出的是第 2 个属性 *height:120px;
在 IE6 下, 三个属性 IE6 都认识, 所以三个属性都可以读取, 又因为第三个属性覆盖掉前 2 个属性, 所以 IE6 最终读取的是第三个属性.
1. 为什么在不同的浏览器显示效果不一样?
因为不同浏览器对于 CSS 样式表的解析不一样, 所以导致样式乃至层布局发生变化. 例如, ff 中设置 padding 属性时, div 会相应增加 height 和 width, 而 IE 的解析是不会的, 再例如 ff 对盒模型的解析和 IE 相差两个象素.
2. 设计时要做到所有浏览器都兼容吗?
根据 "设计诉说" 的站点统计小样本结果显示, 6225 个访问者中有 72.1% 使用 IE6.0;12.7% 使用 IE7.0;7.9% 在使用 FF2.0, 剩余的不同版本的浏览器占的百分比都不到 1% . 所以我认为只要做到 IE6 FF2.0 以及新出的 IE7.0 兼容即可, 顶多向下兼容一下 IE5.5, 完全没有必要为了那些个小数点费劲脑子. 如果有必要可以另外设计 CSS 文件, 然后通过 JS 判断浏览器版本进行选择相应的文件.
3.CSS 样式的优先级是怎么样的?
在正常的 IE 中, 如果你在 CSS 中重复定义一个属性时, 浏览器解析的是后面的属性,
示例: box {height:100px;height:200px;height:400px;height:300px;}
<1>
区分三款浏览器简单方法: #example { color: #333; } /* Moz FF */* html #example { color:
#f0f; } /* IE6 */*+HTML #example { color: #0ff; } /* IE7 */
在兼容 IE7 的 *+HTML 的 hack 一定要在顶部加入 DTD 声明, 否则无效.
<2> ie7.0 与 ie6.0 的之间不兼容
ie7 与 ie6 在 div+CSS 出现宽度定义不同, 在宽度定义上出现宽度的解释不同
IE7 宽度在 IE6 上要宽一些, 正是这个原因网页可能会出现溢出问题, 还好这个问题可以通过更改数值或者修改一下百分比解决..
ie7.0 修复了! important 这个 bug.
先前由于 ie6.0 对! important 识别存在 bug, 在 Firefox 和 IE 中的 BOX 模型解释不一致导致相差 2px, 大部分网页标准设计师通过这个 bug 来兼容 ie6.0 和 Firefox,
即采用: div {margin:30px!important;margin:28px;}.
但是 ie7.0 把这个 bug 给修复了, 所以问题又出现了, 怎么兼容 IE.7.0 的同时又能兼容 ie6.0 和 Firefox?
不过 ie7 也能识别! important 也可以通过这个来区分 IE6. ie7.0 对很多不规范的 CSS 不再支持, 对 JS 语法要求更严格规范. 很多在 IE6 下正常显示的 JS 页面, 在 IE7 下均不能正常显示, 并且还没有提示错误.
ie7.0 对 JS 语法要求更严格规范, 只是这个规范似乎并没有说明, 也没有明白的告诉大家, 他们是怎么 "规" 怎么 "范" 的 .
<3> 如何做到让 IE6.0 与 FF 兼容?
最常用的一种方法了, 也是屡试不爽的 --"!important", 这个字段是用来提高优先级的, 而 IE6.0 对于找个字段是无法识别的, 于是 FF 与 IE6.0 就可以分开解析.
注意事项:
1,float 的 div 一定要闭合.
例如:(其中 floatA,floatB 的属性已经设置为 float:left;)
- <#div id="floatA">
- <#div id="floatB">
- <#div id="NOTfloatC">
这里的 NOTfloatC 并不希望继续平移, 而是希望往下排. 这段代码在 IE 中毫无问题, 问题出在 FF. 原因是 NOTfloatC 并非 float 标签, 必须将 float 标签闭合.
在
- <#div class="floatB">
- <#div class="NOTfloatC">
之间加上
<#div class="clear">
这个 div 一定要注意声明位置, 一定要放在最恰当的地方, 而且必须与两个具有 float 属性的 div 同级, 之间不能存在嵌套关系, 否则会产生异常.
此外, 为了让高度能自动适应, 要在 wrapper 里面加上 overflow:hidden;
当包含 float 的 box 的时候, 高度自动适应在 IE 下无效, 这时候应该触发 IE 的 layout 私有属性, 用 zoom:1; 可以做到, 这样就达到了兼容.
例如某一个 wrapper 如下定义: colwrapper{overflow:hidden;zoom:1;margin:5px auto;}
2,margin 加倍的问题
设置为 float 的 div 在 IE 下设置的 margin 会加倍, 这是一个 ie6 都存在的 bug.
解决方案是在这 个 div 里面加上 display:inline
相应的 CSS 为
- #IamFloat{
- float:left;
- margin:5px;/*IE 下理解为 10px*/
- display:inline;/*IE 下再理解为 5px*/
- }
3, 关于容器的包涵关系
很多时候, 尤其是容器内有平行布局, 例如两, 三个 float 的 div 时, 宽度很容易出现问题. 在 IE 中, 外层的宽度会被内层更宽的 div 挤破.
一定要用 Photoshop 或者 Firework 量取像素级的精度.
4, 关于高度的问题
如果是动态地添加内容, 高度最好不要定义. 浏览器可以自动伸缩, 然而如果是静态的内容, 高度最好定好.
5, 最狠的手段 -- !important;
如果实在没有办法解决一些细节问题, 可以用这个方法. FF 对于 "!important" 会自动优先解析, 然而 IE 则会忽略,
值得注意的是, 一定要将 xxxx !important 这句放置在另一句之上.
6.DOCTYPE 影响 CSS 处理
7.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行.
8.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中.
9.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width.
10.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
11.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个 DIV 一样高 line-height:200px; 然后插入文字, 就垂直居中了 . 缺点是要控制内容不要换行
12.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以.
13.FF: 链接加边框和背景色, 需设置 display: block, 同时设置 float: left 保证不换行.
参照 menubar, 给 a 和 menubar 设置高 度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格.
14. 在 mozilla Firefox 和 IE 中的 BOX 模型解释不一致导致相差 2px 解决方法:
div{margin:30px!important;margin:28px;}
注意这两个 margin 的顺序一定不能写反, 据阿捷的说法! important 这个属性 IE 不能识别, 但别的浏览器可以识别.
所以在 IE 下其实解释 成这样:
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行, 所以不可以只写 margin:XXpx!important;
15.IE5 和 IE6 的 BOX 解释不一致
IE5 下 :div{width:300px;margin:0 10px 0 10px;}
div 的宽度会被解释为 300px-10px(右填充)-10px(左填充) 最终 div 的宽度为 280px, 而在 IE6 和其他浏览器上宽度则是以 300px+10px(右填 充)+10px(左填充)=320px 来计算的.
这时我们可以做如下修改:
- div{
- width:300px!important;width /**/:340px;margin:0 10px 0 10px
- }
- 16.ul 标签在 Mozilla 中默认是有 padding 值的, 而在 IE 中只有 margin 有值,
- 所以先定义 :ul{
- margin:0;padding:0;
- } 就能解决大部分问题
- 17.ff 下父容器的高度自适应
- height:100%; overflow:auto
- 18. 各浏览器 padding 兼容
- padding:0px; /*ff*/*padding:0px; /*ie7.0*/
- _padding:0px; /*ie6.0 */
19.img 下的留白
大家看这段代码有啥问题:
src=""mce_src="" />
把 div 的 border 打开, 你发现图片底部不是紧贴着容器底部的, 是 img 后面的空白字符造成, 要消除必须这样写
src=""mce_src="" />
20. 失去 line-height
<div style="line-height:20px"><img /> 文字 </div>, 很遗憾, 在 ie6 下单行文字 line-height 效果消失了.
原因是 <img /> 这个 inline-block 元素和 inline 元素写在一起了. 解决方案: 让 img 和文字都 float 起来
21 .IE 5.x/Win
在此我们指 Windows 平台上的 IE 5.0 和 IE 5.5.CSS 的支持依然很糟糕, 但是比起 NN 4.x 已经有了长足的改变.
它们臭名昭著错误的盒状模型 (Box model) 可能是导致 CSS 界第一个 hack 的出现. 我们先来看看盒状模型.
W3C 规范的盒子, 可以使用 "相加" 来描述, 即, 一个元素的实际盒子宽度是由内容宽度 (content width), 边框 (border), 边距 (padding) 堆积起来的.
而 IE 5.x/Win 则可以用 "相减" 来描述, 也被称为边框盒状模型 (border box model), 一个元素的实际宽度就是该元素的 width 设值, 边框, 边距都从中减去.
来看一个例子:
div { width: 200px; margin: 20px; padding: 20px; border: 5px;}
依照 W3C 规范, 这个 div 实际所占宽度是 5px + 20px + 200px + 20px + 5px.
而对 IE5.x/Win 的边框盒状模型来说, 这个 div 实际宽度就是 200px, 而内容宽度被压迫到只有 150px:200px - 5px - 20px - 20px - 5px. 这时候, 出现了 Box Model Hack.
该 hack 使用了 IE 5.x/Win 不支持的 voice-family, 并在值中设置一些 CSS 转义引号 (CSS-escape quotes) 欺骗 IE 5.x/Win 认为规则块 (declaration block) 已经闭合.
div { /* 为了更好说明, width 调了一下写作习惯 */ margin: 20px; padding: 20px; border: 5px; width: 240px; /* 1. IE 5.x/Win 需要的宽度 */ voice-family: "\"}\""; /* 2. IE
5.x/Win 看见了}, 认为规则已经结束了 */ voice-family: inherit; /* 3. 能够正确解析的浏览器重置该值 */ width: 200px; /* 4. 这才是我们需要的真正宽度 */}
21. 图片下方出现几像素的空白间隙
问题说明: 这个问题在 ie6 和 ff(火狐) 下经常见到.
例如 <div><img src=""/></div> 这个图片下面会有一条空白间隙.
解决方法: 给图上一个垂直方向的属性如: vertical-align: top(任意一个就行 middle);
这个问题从而延伸到 --object(视频) 和 textarea 在火狐下也会出现类似的问题, 解决方法一样.
重置代码里就有这样一个全局定义: object,textarea,img{vertical-align: top;}
22.IE6 双倍 margin 的 BUG(双边距)
问题说明: 这是 ie6 一个著名的 bug, 当一个元素向一边浮动时, 其它同一个方向如果有 margin 的话, ie6 就会产生双倍的 margin.
例如:<div style="float: left;margin-left: 10px;"></div> 在 ie6 下显示会有 margin-left:20px 的距离
解决方法: 加个_display:inline: 属性
例如 <div style="float: left;margin-left: 10px;_display: inline;"></div>
23.ie6 下的浮动元素和非浮动元素间出现 3 像素 BUG
问题说明: 这也是 ie6 一个著名的 bug, 当一个元素浮动时, 同级别的文字没有浮动, 在 ie6 下它们之间就会产生 3 个像素的 bug.
例如:<div><img style="float: left;" src=""/> 摘要摘要摘要摘要 </div>, 图片和文字就会出现 3 像素
解决方法: 方法一, 两个元素都浮动,
如:<div><img style="float: left;" src=""/><span style="float: left;"> 摘要摘要摘要摘要 </span></div>;
方法二, 这种设计时一般图片和文字要有间隙的, 做个 ie6 的 hack 就行,
如:<div><img style="float: left;" src=""/><span style="margin-right: 5px; _margin-right: 2px;"> 摘要摘要摘要摘要 </span></div>
24.li 在 IE 中底部空行
问题说明: 当 li 里面有两个以上的浮动元素时, li 的下面就会产生一条空白间隙,
例如:<ul class="tlist"><li><span style="float: left;"> 栏目 </span><a style="float: left;" href="#" target="_blank"> 标题标题标题 </a></li></ul>
解决方法: 这个问题和第一个问题很相似, 解决方法也是一样, 在 li 上加个垂直方向的属性,
例如:<ul class="tlist"><li style="vertical-align: top;"><span style="float: left;"> 栏目 </span><a style="float: left;" href="#" target="_blank"> 标题标题标题 </a></li></ul>
25.IE6 样式中文注释后引发失效
问题说明: 这是 ie6 出现的奇怪现象. 这是由于 CSS 和 HTML 的编码不同所引致, 满足下面条件就会引起注释下面的样式不起作用:
1). CSS 有中文注释
2). CSS 为 ANSI 编码
3). HTML 为 utf-8 编码
解决方法:
1). 去掉中文注释, 用英文注释或者多打几个 "*", 这是 ahuing 在之前的教程里提到的, 例如: /*** 注释 ***/
2). 统一 CSS 和 HTML 的编码
建议采用第二种解决方法. ps: CSS 为 uft-8 HTML 为 ANSI , 貌似不会出现失效的情况.
26.IE6 出现重复字符 (文字溢出)
问题说明: 一个容器包含 2 两个具有 "float" 样式的子容器, 第二个容器的宽度大于父容器的宽度, 或者父容器宽度减去第二个容器宽度的值小于 3, 在第二个容器前存在注释 (这也是为什么此 bug 也叫做 "IE6 注释 bug" 的原因).
例如下列代码:
- xmlns="http://www.w3.org/1999/xhtml">
- http-equiv="Content-Type" content="text/html; charset=gbk" />
标题
- *{ margin: 0;padding: 0;font-size: 12px; } .a{width:205px;} .b{ float:
- left; width: 50px; background: black;color: #fff;margin-right: 5px; overflow:
- hidden; } .c{ float: left; width: 150px; background: red; }
- class="a">
- class="b">
测试测试测试测试测试测试测试 111111111111
class="c">
测试测试测试测试测试测试测试 2222222222
解决方法:
为何会出现重复文字, 谁也没说清楚, 包括官方, 这个问题, 个人认为, ie6 将注释也当成内容存在. 如何消灭重复文字, 只要让上面任何一个条件不满足即可.
改变结构, 不出现 [一个容器包含 2 两个具有 "float" 样式的子容器] 的结构.
1). 减小第二个容器的宽度, 使父容器宽度减去第二个容器宽度的值大于 3.
2). 去掉所有的注释.
3). 在第二个容器后面加一个或者多个 <div style="clear"></div> 来解决.
4). 给溢出文字的标签加 position: relative; 属性
27.PNG 图片在 IE6 下出现透明或背景变灰的 bug;
问题说明: 这里的 PNG 图片是指 32 位和 24 位的, 8 位的 PNG 图片透明 ie6 是支持的.
解决方法:
1) 使用滤镜, 语法如下
- .image-style
- {
- background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png", sizingMethod="scale");
- }
注意: 使用滤镜需要损耗性能.
2) 给 IE6 单独制作一张. gif 图片 (或者 8 位的 PNG 图片), 打上 hack
.image-style{ background:transparent url("filename.png") no-repeat scroll 0 0;_background-image:url("filename.gif"); }
这种方法只需要在切图时多存储一份. gif 格式的图片, 一般采用这种方法.
参考: https://www.cnblogs.com/guchenfeng/p/4702004.html
来源: http://www.bubuko.com/infodetail-3162703.html