WEB前端

谷歌浏览器css padding 兼容问题 与IE不一样

位置:首页 > WEB前端 > css教程,2017-10-01 12:52
谷歌浏览器css padding 兼容问题 与IE不一样,可以使用important解决,其实border宽度也同样适用。
div{ width:500px; padding:0px;  
} 

chrome和ie下宽度均为500px,两者相同。

 

但是:

div{ width:500px; padding:0px 20px 0px 20px;  
}  

当padding的值不为0的时候,情况就不一样了。

chrome下 div的总宽度变为:500px+20px+20px=540px;

ie下div的总宽度:500px;(padding被算在了width内)

 

另外:border属性也存在跟padding类似的问题。

 

可以用一个简单的css hack解决上述问题。

div{ width:460px;!important;  /*for chrome*/ 
width:500px;         /*for ie*/ 
padding:0px 20px 0px 20px; 
}


ie会忽略 第一个加了!important属性的width,而chrome会识别这个属性。最终ie和chrome下的宽度都为500px。

 

TAGS:谷歌浏览器css paddingcss padding 兼容

猜你喜欢

本月热门的内容

最近更新的内容

NewHot