浏览器CSS兼容性问题解决方案整理

ifHappyEveryDay@

于 2024-04-21 22:53:42 发布

阅读量1.2k

点赞数 26

文章标签： css 前端浏览器兼容 web前端

本文链接：https://blog.csdn.net/luoawai/article/details/138048528

版权

本文详细介绍了CSS黑客技巧如何处理不同浏览器之间的兼容性问题，包括使用CSSHack解决IE6、7及遨游浏览器的特定样式，浮动元素的闭合技巧，以及解决Firefox、IE的布局、边距、间距和居中问题，还包括链接样式调整和浏览器CSS前缀的使用。

摘要由CSDN通过智能技术生成

1、CSS Hack

使用 hacker 可以把浏览器分为3类：IE6；IE7和遨游；其他（IE8 Chrome ff Safari opera等）
（1）IE6认识的 hacker 是下划线 _ 和星号 *
（2）IE7和遨游认识的 hacker 是星号 *
如： height:300px;*height:200px;_height:100px;
（1）IE6浏览器在读到 height:300px 的时候会认为高时 300px
继续往下读，他也认识 *heihgt ，所以当IE6读到 *height:200px 的时候会覆盖掉前一条的相冲突设置，认为高度是 200px 。
继续往下读，IE6还认识 _height ,所以他又会覆盖掉 200px 高的设置，把高度设置为 100px 。
（2）IE7和遨游也是一样的从高度 300px 的设置往下读。当它们读到 *height:200px 的时候就停下了，因为它们不认识 _height 。
所以它们会把高度解析为 200px ，剩下的浏览器只认识第一个 height:300px ;
所以他们会把高度解析为 300px 。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

2、CSS 样式兼容不同浏览器问题

所有浏览器通用： height: 100px;
IE6 专用： _height: 100px; 或者 *height: 100px;
IE7 专用： *+height: 100px;
IE7、FF 共用： height: 100px !important;
以下两种方法几乎能解决现今所有兼容：
（1） !important
随着IE7对 !important 的支持, !important 方法现在只针对IE6的兼容(注意写法，记得该声明位置需要提前)

.box {
  width: 100px !important; /* IE7+FF */
  width: 80px; /* IE6 */
}

(2)IE6/IE77对FireFox <from 针对FireFox ie6 ie7的css样式>
*+html 与 *html 是IE特有的标签，FireFox 暂不支持。而 *+html 又为 IE7特有标签。

.box { width: 120px; } /* FireFox */
*html .box { width: 80px;} /* ie6 fixed */
*+html .box { width: 60px;} /* ie7 fixed, 注意顺序 */

3、万能 float 闭合(非常重要) 可以用这个解决多个 div 对齐时的间距不对

将以下代码加入 Global CSS 中，给需要闭合的 div 加上 class=“clearfix” 即可，屡试不爽。
代码：

<style>
/* Clear Fix */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
/* Hide from IE Mac \*/
.clearfix {
    display:block;
}
/* End hide from IE Mac */
/* end of clearfix */
</style>

4、其他兼容技巧

Firefox下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会(可用 !important 解决)
居中问题：
垂直居中将 line-height 设置为当前 div 相同的高度, 再通过 vetical-align: middle ( 注意内容不要换行）
水平居中： margin: 0 auto; (当然不是万能)
若需给 a 标签内内容加上样式，需要设置 display: block; (常见于导航标签)
Firefox 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie下 margin 加倍等问题
ul 标签在 FF 下面默认有 list-style 和 padding 最好事先声明，以避免不必要的麻烦(常见于导航标签和内容列表)
作为外部 wrapper 的 div 不要定死高度，最好还加上 overflow: hidden 以达到高度自适应

5、兼容代码：兼容最推荐的模式。

/* FF */
.submitbutton {
    float: left;
    width: 40px;
    height: 57px;
    margin-top: 24px;
    margin-right: 12px;
}
/* IE6 */
*html .submitbutton {
    margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
    margin-top: 21px;
}

6、不同浏览器的标签默认margin 和 padding 不同

问题说明：随便写几个标签，不加样式控制的情况下，各自的 margin 和 padding 差异较大。
解决方案： CSS: *{margin: 0;padding:0;} 或者直接引入normalize

7、图片默认有间距

问题说明：几个 img 标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
解决方案：使用 float 属性为 img 布局
备注：因为 img 标签是行内属性标签，所以只要不超出容器宽度， img 标签都会排在一行里，但是部分浏览器的 img 标签之间会有个间距。去掉这个间距使用 float 是正道。

8、CSS 布局中的居中问题

问题说明：首先在父级元素定义 text-align: center; 这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。
解决办法：在子元素定义时候设定时再加上 margin-right: auto; margin-left: auto;

9、链接(a标签)的边框与背景

a 链接加边框和背景色，需设置 display: block; 同时设置 float: left; 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位，若不设 height, 可以在 menubar 中插入一个空格。
19、超链接访问过后 hover 样式就不出现的问题
问题说明：被点击访问过的超链接样式不在具有 hover 和 active了
解决技巧是改变CSS属性的排列顺序: L-V-H-A ；

<style type="text/css"> 
<!-- a:link {} a:visited {} a:hover {} a:active {} --> 
</style>

10、浏览器 CSS 兼容前缀

-o-transform:rotate(7deg); // Opera

-ms-transform:rotate(7deg); // IE

-moz-transform:rotate(7deg); // Firefox

-webkit-transform:rotate(7deg); // Chrome

transform:rotate(7deg); // 统一标识语句