常见的浏览器兼容性问题及解决方案所谓的浏览器兼容性问题是指由于不同的浏览器对同一段代码有不同的解析导致页面显示疗效不统一的情况。在大多数情况下我们的需求是无论用户用哪些浏览器来查看我们的网站或则登录我们的系统都应当是统一的显示疗效。所以浏览器的兼容性问题是后端开发人员常常会遇到和必需要解决的问题。浏览器兼容问题一不同浏览器的标签默认的外宽度和内宽度不同问题病症随意写几个标签不加式样控制的情况下各自的margin和padding差别较大。到频度100解决方案CSS里备注这个是最常见的也是最易解决的一个浏览器兼容性问题几乎所有的CSS文件开头就会用转义来设置各个标签的内外宽度是0。问题病症常见病症是IE6中前面的一块被顶到下一行遇到频度90稍稍复杂点的页面就会遇到float布局最常见的浏览器兼容问题解决方案在float的标签式样控制中加入displayinline将其转化为行内属性备注我们最常用的就是divCSS布局了而div就是一个典型的块属性标签纵向布局的时侯我们一般都是用divfloat实现的纵向的宽度设置假如用margin实现这就是一个必然会遇到的兼容性问题。浏览器兼容问题三设置较小高度标签通常大于10px在IE6IE7遨游中高度超出自己设置高度问题病症IE6、7和遨游里这个标签的高度不受控制超出自己设置的高度遇到频度60决方案给超出高度的标签设置overflowhidden或则设置列宽line-height大于你设置的高度。
备注这些情况通常出现在我们设置小圆角背景的标签里。出现这个问题的缘由是IE8之前的浏览器就会给标签一个最小默认的列宽的高度。虽然你的标签是空的这个标签的高度还是会达到默认的列宽。浏览器兼容问题四行内属性标签设置displayblock后采用float布局又有横行的margin的情况IE6宽度bug问题病症IE6里的宽度比超过设置的宽度遇到概率20解决方案在displayblock前面加入displayinlinedisplaytable备注行内属性标签为了设置宽高我们须要设置displayblock不仅input标签比较特殊。在用float布局并有纵向的margin后在IE6下他就具有了块属性float后的纵向margin的bug。不过由于它本身就是行内属性标签所以我们再加上displayinline的话它的高宽就不可设了。这时侯我们还须要在displayinline前面加入displaytalbe。浏览器兼容问题五图片默认有宽度问题病症几个img标签置于一起的时侯有些浏览器会有默认的宽度加了问题中学提及的键值也不起作用。遇到概率20解决方案使用float属性为img布局备注由于img标签是行内属性标签所以只要不超出容器长度img标签就会排在一行里并且部份浏览器的img标签之间会有个宽度。
去除这个宽度使用float是正道。我的一个中学生使用负margin其实能解决但负margin本身就是容易造成浏览器兼容问题的用法所以我严禁她们使用浏览器兼容问题六标签最低高度设置min-height不兼容问题病症由于min-height本身就是一个不兼容的CSS属性所以设置min-height时不能挺好的被各个浏览器兼容遇到概率5解决方案假如我们要设置一个标签的最小高度200px须要进行的设置为min-height200pxheightautoImportAntheight200pxoverflowvisible备注在B/S系统后端开时有好多情况下我们又这些需求。当内容大于一个值如300px时。容器的高度为300px当内容高度小于这个值时容器高度被撑高而不是出现滚动条。这时侯我们都会面临这个兼容性问题。浏览器兼容问题七透明度的兼容CSS设置做兼容页面的方式是每写一小段代码布局中的一行或则一块我们都要在不同的浏览器中看是否兼容其实熟练到一定的程度就没那么麻烦了。建议常常会遇到兼容性问题的菜鸟使用。好多兼容性问题都是由于浏览器对标签的默认属性解析不同导致的只要我们稍加设置都能轻松地解决这种兼容问题。
假如我们熟悉标签的默认属性的话能够挺好的理解为何会出现兼容问题以及如何去解决这种兼容问题。我甚少使用hacker的可能是个人习惯吧我不喜欢写的代码IE不兼容之后用hack来解决。不过hacker还是十分好用的。使用hacker我可以把浏览器分为3类IE6IE7和遨游其他IE8ChromeffSafariopera等IE6认识的hacker是顿号_和星号IE7遨游认识的hacker是星号例如这样一个CSS设置height300pxheight200px_height100pxIE6浏览器在读到height300px的时侯会觉得高时300px继续往下读他也认识heihgt所以当IE6读到height200px的时侯会覆盖掉前一条的相冲突设置觉得高度是200px。继续往下读IE6还认识_height所以他又会覆盖掉200px高的设置把高度设置为100pxIEpxIE7和遨游也是一样的从高度300px的设置往下读。当它们读到height200px的时侯就停下了由于它们不认识_height。所以它们会把高度解析为200px剩下的浏览器只认识第一个height300px所以她们会把高度解析为300px。由于优先级相同且想冲突的属性设置后一个会覆盖掉前一个所以书写的顺序是很重要的。MSN空间完美搬家到新浪博客
