关于浏览器兼容性的讨论(1)

Shidong Zhu | Created: Jan 27, 2017 Updated: Jul 24, 2024

浏览器兼容性也就是指针对不同的浏览器(IE,Firefox,Chrome...)显示效果可能不一致而产生浏览器和网页间的兼容问题。而目前并没有统一的工具能解决这一问题,对于前端开发人员来说浏览器的兼容性无疑是开发过程中不可逃避的也是很繁琐的步骤,那么当面对这样的问题时有哪些小技巧呢?

(1)不同浏览器对高度的识别。 所有浏览器通用:height: 100px;IE6专用:_height: 100px; *height: 100px;IE7专用:*+height: 100px;

(2)不同浏览器默认的内外边距不同。 针对这个问题,我们可以在样式表中设置*{padding:0;margin:0;},对内外边距清零来使得浏览器达到统一,这样就不会出现不同浏览器可能出现的内外边距导致的问题。

(3)Firefox下给div设置padding后会导致width和height相应的增加,但是IE不会。 这样的话就可以用!important来解决,因为ie6浏览器不识别!important属性,这样css可以设置width:100px !important;width: 120px;padding:0 10px;

(4)margin加倍的问题。 设置float的div在ie下设置的margin会加倍,这其实是一个ie的bug。如果出现这个问题我们可以对div设置display:inline;这样的话ie就不会显示加倍问题了。
block与inline两个元素:block元素的特点是占满一行,也就是下一个元素会换行,但高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是不会占满一行会和其他元素在同一行上,不可控制(内嵌元素);

(5)最小宽度与高度的问题。 ie不识别min-这个定义的,在ie里面就会把width,height当做min-width,min-height来使用,如果只在样式里面定义min-width,min-height的话,这样在ie里面就识别不出从而没有宽和高了。所以在设置最小宽和高的时候可以设置宽和高自动。

关于作者

Dan Hu

Shidong Zhu

联系我们 订阅电子报

Practical B2B Marketing Tips to 10X Better Marketing Results

Join 2,000+ professionals getting: Proven growth tactics, battle-tested strategies, and real B2B case studies.

Stephen Tseng
Stephen Tseng

为什么 B2B 企业的广告预算不断增加,高质量询盘却没有增长?

对于许多 B2B 企业来说,广告预算持续投入,网站访问量看起来也不错,但真正有价值的询盘却始终有限。问题往往不在于是否继续加预算,而在于广告是否吸引了正确的客户,以及点击之后是否形成有效转化。

继续阅读 →

Stephen Tseng
Stephen Tseng

海外品牌在中国卖不动,真的是中国市场太难了吗?

很多海外企业觉得“中国市场太难了”。在得出这个结论之前,先问一个问题:当中国客户产生采购需求时,他们能不能在百度上找到你?问题往往不是需求不足,而是品牌可见度不够。

继续阅读 →