邯郸学校网站建设,windows优化大师官网,大连网络设计有限公司,wordpress会员支付宝(1)浏览器兼容问题一#xff1a;不同浏览器的标签默认的外补丁和内补丁不同 问题症状#xff1a;随便写几个标签#xff0c;不加样式控制的情况下#xff0c;各自的margin 和padding差异较大。碰到频率:100%解决方案#xff1a;CSS里 *{margin:0;padding:0;}备注#xff…(1)浏览器兼容问题一不同浏览器的标签默认的外补丁和内补丁不同 问题症状随便写几个标签不加样式控制的情况下各自的margin 和padding差异较大。碰到频率:100%解决方案CSS里 *{margin:0;padding:0;}备注这个是最常见的也是最易解决的一个浏览器兼容性问题几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。 (2)浏览器兼容问题二块属性标签float后又有横行的margin情况下在IE6显示margin比设置的大 问题症状:常见症状是IE6中后面的一块被顶到下一行碰到频率90%稍微复杂点的页面都会碰到float布局最常见的浏览器兼容问题解决方案在float的标签样式控制中加入 display:inline;将其转化为行内属性备注我们最常用的就是divCSS布局了而div就是一个典型的块属性标签横向布局的时候我们通常都是用div float实现的横向的间距设置如果用margin实现这就是一个必然会碰到的兼容性问题。 (3)浏览器兼容问题三设置较小高度标签一般小于10px在IE6IE7遨游中高度超出自己设置高度 问题症状IE6、7和遨游里这个标签的高度不受控制超出自己设置的高度碰到频率60%解决方案给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。备注这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的这个标签的高度还是会达到默认的行高。 (4)浏览器兼容问题四行内属性标签设置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。 (5) 浏览器兼容问题五图片默认有间距 问题症状几个img标签放在一起的时候有些浏览器会有默认的间距加了问题一中提到的通配符也不起作用。碰到几率20%解决方案使用float属性为img布局备注 因为img标签是行内属性标签所以只要不超出容器宽度img标签都会排在一行里但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。我的一个学生使用负margin虽然能解决但负margin本身就是容易引起浏览器兼容问题的用法所以我禁止他们使用 (6) 浏览器兼容问题六标签最低高度设置min-height不兼容 问题症状因为min-height本身就是一个不兼容的CSS属性所以设置min-height时不能很好的被各个浏览器兼容碰到几率5%解决方案如果我们要设置一个标签的最小高度200px需要进行的设置为{min-height:200px; height:auto !important; height:200px; overflow:visible;}备注在B/S系统前端开时有很多情况下我们又这种需求。当内容小于一个值如300px时。容器的高度为300px当内容高度大于这个值时容器高度被撑高而不是出现滚动条。这时候我们就会面临这个兼容性问题。 (7)浏览器兼容问题七透明度的兼容CSS设置 一般在ie中用的是filter:alpha(opacity0);这个属性来设置div或者是块级元素的透明度而在firefox中一般就是直接使用opacity:0,对于兼容的一般的做法就是在书写css样式的将2个都写上就行就能实现兼容 参考https://www.nowcoder.com/ta/review-frontend/review?page47转载于:https://www.cnblogs.com/guorange/p/7202340.html
