如何解决不同浏览器之间的兼容性问题

    做兼容页面的方法是:每写一小段代码(布局中的一行或者一块)我们都要在不同的浏览器中看是否兼容,当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。下面简单的举两个小例子。

问题一:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug

行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline 的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe,此元素会作为块级表格来显示。

问题二:图片默认有间距

当几个img标签放在一起的时候,有些浏览器会有默认的间距,加通配符也不起作用。首先因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。有些前端新手使用负margin,虽然能解决,但负margin本身就很容易引起浏览器兼容问题的用法,所以最好不要用。


关键词:
返回列表

相关文章

相关案例