前言:
此时小伙伴们对“网页设计div嵌套”大概比较讲究,咱们都想要剖析一些“网页设计div嵌套”的相关内容。那么小编在网上搜集了一些对于“网页设计div嵌套””的相关文章,希望姐妹们能喜欢,兄弟们一起来学习一下吧!什么是浏览器兼容性问题
浏览器兼容性问题:是指因为不同的浏览器基于不同的内核对同一段代码有不同的解析,造成页面显示效果不统一的情况。
目前测试常用的几大浏览器
1.IE tester IE浏览器 (综合了IE的大部分版本)
2.Chorme 谷歌浏览器 (最常用)
3.Firefox 火狐浏览器 (以前常用)
4.Safari 苹果公司浏览器 (苹果MacOSX平台的多标签的网络浏览器)
5.Opera 欧朋浏览器 (全球第一手机浏览器Opera的中文品牌产品)
CSS常见兼容性问题及解决方案:
1. 上下margin重合问题:
问题描述:相邻的margin-left和margin-right是不会重合的,但是相邻的块级元素margin-top 和margin-bottom会产生重合。
解决方案:统一设置margin-top或者 Marin-bottom,不要混合使用。
2.超链接访问后,hover样式不显示:
问题描述:同时设置a:visited和a:hover样式后,超链接访问后,hover的样式不显示,
问题原因:<a>标签中的样式顺序出现了错误。
解决方案:将他们的样式排序为 a:link , a:visited , a:hover , a:active .
3.行内元素上下margin及padding不拉开元素间距的问题:
问题描述:行内元素的margin和padding属性很奇怪,水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果,但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
解决方案:将行内元素display设置为block即可解决
4.不同浏览器的标签默认的外间距和内间距不同
问题描述:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
解决方案:在CSS文件开头用通配符*来设置各个标签的内外边距是0。
*{ margin: 0px; padding:0px;}
5.ul在浏览器中不同表现,具有默认边距在不同浏览器中显示的位置不同:
问题描述:在IE中,ul的默认边距是margin,在Firefox中,ul的默认边距是padding。
解决方案:设置其属性 padding:0px ; Margin : 0px;
6.按钮默认大小不一:
问题描述:不同浏览器的默认按钮大小可能不同。
解决方案:用a标签来模拟按钮,添加样式;如果按钮是一张背景图片,那么直接给按钮添加背景图;
7.图片间默认又间距问题:
问题描述:几个img标签(行内标签)放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。
解决方案:使用float属性为img布局
8.双倍浮动问题:
问题描述:块状元素float后,有添加了横向的margin,在IE6下比设置的值要大。
解决方案:给float标签添加display:inline,将其转换为行内元素
9.设置较小高度的容器(小于10px),在IE6下不识别小于10px的高度
问题描述:IE8之前的浏览器都会给标签一个最小默认的行高的高度,一般会出现在设置小圆角背景标签里。
解决方案:给容器添加overflow:hidden;或者设置行高line-height 小于你设置的高度。
10.容器不扩展问题:
问题描述:div嵌套结构中,外层的高度并没有随着子容器的高度自动扩展,却是形成了一条线。
问题原因:因为当子容器成为浮动元素后,并脱离了文档流,父容器认为自己内容为空而导致的。
解决问题:在容器的末尾加入个清理浮动的div。 在网页中的任何地方,当遇到容器不扩展时,只需加入以下代码段,便能修复问题。
<div style="clear:both;display:block;font:0px/0px sans-serif;"> </div>
标签: #网页设计div嵌套 #cssfloat兼容 #css间隙兼容