浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度碰到频率:60%解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度 。备注:这种情况一般出现在我们设置小圆角背景的标签里 。
出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度 。即使你的标签是空的,这个标签的高度还是会达到默认的行高 。
浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug问题症状:IE6里的间距比超过设置的间距碰到几率:20%解决方案:在display:block;后面加入display:inline;display:table;备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊) 。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug 。
不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了 。这时候我们还需要在display:inline后面加入display:talbe 。
浏览器兼容问题五:图片默认有间距问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用 。碰到几率:20%解决方案:使用float属性为img布局备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距 。
去掉这个间距使用float是正道 。(我的一个学生使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以我禁止他们使用)浏览器兼容问题六:标签最低高度设置min-height不兼容问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容碰到几率:5%解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}备注:在B/S系统前端开时,有很多情况下我们又这种需求 。
当内容小于一个值(如300px)时 。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条 。
这时候我们就会面临这个兼容性问题 。浏览器兼容问题七:各种特殊样式的兼容,比如透明度、圆角、阴影等 。
特殊样式每个浏览器的代码区别很大,所以,只能现查资料通过给不同浏览器写不同的代码来解决 。JS解决IE6下png透明失效的问题做兼容页面的方法是:每写一小段代码(布局中的一行或者一块)我们都要在不同的浏览器中看是否兼容,当然熟练到一定的程度就没这么麻烦了 。
建议经常会碰到兼容性问题的新手使用 。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题 。
如果我们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题 。
6. 网页编程:如何写css样式才能兼容大多数浏览器 其实兼容问题很经常碰到,基本是碰到什么样的情况解决办法不一样
但是简单的避免兼容问题的规范还是有的
比如,用div时候,内边距的设定+宽度的设定就有可能出现不兼容
我们首先要明白为什么会出现不兼容的问题
要通过现象看本质,其实是因为理解不一样
IE是设定好了宽度,你设置内边局是在设定好的宽度下,在变,就是说IE理解的是宽度比内边距的优先级高,而火狐不一样,他是在原来的宽度上在加上内边距的宽度,无形中你设置的宽就变了