关于css在IE浏览器以及其他各大浏览器的一些兼容问题

要说各大浏览器兼容问题,首先说一下各大浏览器的内核是不足为过的

1、IE浏览器内核:Trident内核,也是俗称的IE内核;

2、Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;

3、Firefox浏览器内核:Gecko内核,俗称Firefox内核;

4、Safari浏览器内核:Webkit内核;

5、Opera浏览器内核:最初是自己的Presto内核,后来加入谷歌大军,从Webkit又到了Blink内核;

首先在IE浏览器下,ie8版本可谓是一个很大的分界点,它既不支持CSS3也不支持HTML5的属性。

在标准的盒子模型中(ie8 以上的版本中),宽度和高度指的是 content部分;

但是在ie8以下的版本中,宽度和高度具体指  content  +  padding  +  border 三部分;
所以需要注意低版本的ie中盒子模型下的元素的宽高问题;
按照正常来讲,这将是一个宽高均为200像素,边框为3像素的盒子。但是IE盒子模型不会这样认为,IE盒子模型的宽度和高度是包括了边框的宽高的。


ie盒模型的bug问题
换句话来说就是,

IE盒子模型的宽度为:200px + 3px + 3px (200盒子宽度 + 3px左边框宽度 + 3px右边框宽度)

就是外加,会改变原本盒模型的宽高,可以用box-sizing属性


标准盒子模型的宽度为:200px(194px内容宽度 + 3px左边框宽度 + 3px右边框宽度)

针对这样的情况,我们如何来选择“盒子模型”呢,选择一个正确的盒子模型。

IE的盒子模型可以说是IE的一个BUG,我们应该采用标准的盒子模型进行布局,我们在HTML文档的DOCTYPE声明中添加一段声明。(如果不添加这段声明,IE就会按照它所理解的模型进行处理,而FF浏览器就会按照标准盒子模型进行处理,这样不同浏览器的使用者访问网页的效果就会不同。相反,如果加上声明,所有浏览器都会按照标准盒子模型去处理,不同浏览器的使用的访问网页的效果也就一致了。)


2.最被痛恨的:double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。

解决方案:给浮动容器定义display:inline。

3.mirror margin bug,当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-botto
m:14px。 padding也会出现类似问题,都是ie6下的特产,该类bug 出现的情况较为复杂,远不只这一种出现条件,还没系统整理。

解决方案:外层元素设定border 或设定float。

4. 吞吃现象。还是ie6,上下两个div,上面的div设置背景,却发现下面没有设置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。

解决方案:使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

5.img 下的留白,大家看这段代码有啥问题:
<div>
<img src=”" mce_src=”" />
</div>
把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写
<div>
<img src=”" mce_src=”" /></div>
后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案:给img设定display:block。

6.position:定位的兼容问题

1、div的position使用relative的时候,是基于前一个元素(同级),而不是基于父节点,这与我原先的想法是不一致的。

2、使用relative在IE7下表现良好,但是在IE8/FF/Chrome下居然会直接影响到父节点的下一个兄弟元素,具体表现就是会将下一个元素向下推,导致div中有空隙(大小估计取决于使用relative的元素大小和多少),所以relative模式使用需要谨慎



DIV中的Table

IE7下表现良好,IE8/FF/Chrome就会在div的上边缘和table之间有一个5px左右的空隙,不同的是IE8下无法调整,margin失效。。=_=!,FF/Chrome可以使用margin来定位,但是又会造成IE7下显示错误,目前没有找到替换或解决方案(包括Hack)



td中的div

这个在IE8/FF/Chrome下表现良好,table的边缘和td贴合紧密,margin使用正常,但是在IE6/IE7下会导致td的大小根本无法准确定义(会挤得变形),而且最致命的是当td中含有过大的元素,如div或是input,宽度超过一定比例(比如95%)时,会导致td的左边绘制错误(估计是计算屏幕更新区的BUG),这一点在table中td在自动调整后尤为明显
、其他兼容技巧

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

1 针对firefox ie6 ie7的css样式 
现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,
但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针
对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。 
现在写一个CSS可以这样: 

.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

CSS3中的一些属性的兼容问题

总得一句话就是ie8一下不要用CSS3和HTML5的属性就行的,其他的就大可不必要了

  • 1
    点赞
  • 0
    评论
  • 3
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论
请先登录 后发表评论~
©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

代码无边,回头是岸

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值