常见CSS布局疑难问题及其解决_css列表属性样式设置常见问题-CSDN博客

本文链接：https://blog.csdn.net/liaozhongping/article/details/47031799

常见CSS布局疑难问题及其解决

（1）浏览器的默认样式

因为不同浏览器的默认页面效果的设置是不同的。

如：

页边距： IE浏览器默认为body元素的margin-left属性定义，默认值为10px

但对于FF浏览器来说，默认为body元素的padding-left属性定义，默认为8px

鼠标指针： IE默认为cursor属性定义，值为hand；FF浏览器默认为cursor属性，值为pointer

（2）列表序号无效了

主要是“当为有序列表<ol>定义高度时，列表序号将显示无效”。该问题只存在于非标准的IE浏览器中（IE 7及其以下版本浏览器）

解决：

避免直接为列表选项定义高度（height），可通过间接方式定义高度（line-height,padding）。

例如：

li{ border-bottom:1px solid #CCC;

list-style-type:decimal;

list-style-position:inside;

height:20px;} ------显示的列表项序号全部为1

改进：

line-height:20px; ---------此时就能正常显示

（3）列表序号丢失了

主要是“当为列表框定义一个宽度时，在某种情况下项目符号会突然丢失”。该问题存在于IE6和IE7浏览器中。

解决：

定义项目符号位置在内部显示，或者为列表项定义左侧边界（左侧补白）大小为两个字体宽度。

例如：

ol{ width:400px; }

li{ border-bottom:1px solid #CCC; list-style-type:decimal; }

-----此时因为给列表框定义了一个宽度值，导致列表序号丢失了

解决：

ol{ width:400px; }

li{ border-bottom:1px solid #CCC; list-style-type:decimal; list-style-position:inside; }

（4）列表序号乱了

主要是“当为有序列表结构中某列表项定义宽度或高度等特殊声明时，有序项目符号会发生混乱”。该问题存在于非标准IE浏览器中（IE7及其以下版本浏览器）。

解决：
法一：通过间接方法来实现，即是给要定义宽度的列表项包裹一个外套，然后为外套定义宽度。

法二：取消列表结构的默认项目符号，使用背景图像来定义项目符号。

例如：

li{ border-bottom:1px solid #CCC;

list-style-type:decimal;

list-style-position:inside; }

.l3{ width:100%; }

--------可以看到最终结果是第二个列表项序号变为1。

解决：

删除 .l3{ width:100%; }

（5）列表项间距莫名其妙地增大了

主要是“在新闻列表或者导航列表中，如果定义超链接（a元素）为块状显示，让<a>标签块状显示，目的是可以定义超链接的宽高，在浏览器中预览会发现列表项间距莫名其妙地增大了”。

该问题主要在IE6及其以下版本浏览器中。

解决方法：

为列表项定义宽度、高度或边框；或者为列表项添加zoom:1;样式。

例如：

</ul>

li a{ display:block; }

-------列表项之间的间距变得非常大

解决：

法一： li{ border-bottom:1px solid #CCC; } /*这种方法是增加底边线*/

或者： li{ width:100%; } /* 满宽显示*/

或者： li{ height:1.1em; } /*以行高大小定义高度*/

法二：

li{ zoom:1; } /*缩放列表项为100%，即不缩放*/

（6）项目内容老错行显示

主要是“在新闻列表或者导航列表中，如果定义超链接（a元素）为块状显示，且项目符号在内部显示时，则项目内容会错行显示” （因为项目符号显示在列表项的内部，标准浏览器会根据块状元素仅能够在一行内显示的原则，从而错行显示。）该问题主要存在于非标准的IE浏览器（IE7及其以下版本浏览器）

解决：

为列表项定义宽度、高度或边框；或者为列表项添加zoom:1;样式。

例如：

li{ list-style-position:inside; zoom:1;}

li a{ display:block; }

-------此时项目内容跟项目符号错行显示。

解决：

法一：

li{ list-style-position:outside; zoom:1; } /*列表符号显示在外面*/

法二：

li{ display:inline-block; } /*行内块状显示，清除满行显示*/

（7）定义元素高度无效(高度heightà行高line-heightà字体大小font-size)

主要是“当定义元素的高度小于元素行高时，则高度无效，元素高度始终与行高一致”。

该问题主要存在于IE6及其以下版本浏览器中（因为IE6及其以下版本的浏览器为所有元素都设置了一个默认的行高，即使该元素没有包含任何文本，当高度小于默认行高时，会以默认行高为准进行显示）。

解决：

定义元素内字体大小为0，清除行高对于高度的影响；或者使用CSS的overflow属性来裁切多出的高度（多出的是inline-height值-height值）。

例如：

#bar{ width:400px; height:6px; background:blue; }

/*此时层的高度不是6px，而是浏览器默认的行高*/

解决：

法一：

#bar{ font-size:0; }

/*定义元素内字体大小为0，这样就清除了行高对于高度的影响。但不能定义行高为0，因为字体大小默认为16px，所以还会影响高度设置，当字体大小为0时，行高也就没有了*/

法二：

使用CSS的overflow属性来裁切多出的高度，即添加如下样式：

#bar{ overflow:hidden; } /*裁切多出区域*/

（8）元素宽度和高度计算错误

主要是“解析CSS的height和width属性错误，将元素的内容区域、补白区域和边框区域都是为元素的height和width属性值包含范围。而根据W3C标准，CSS的height和width属性值不应该包含补白区域和边框区域大小，它仅包含内容区域”。

该问题存在于IE6以下版本浏览器中。

解决：

使用过滤器或者IE条件语句单独为IE6以下版本定义height和width属性值。

例如：

#box{ width:100px; height:50px; padding:50px; border:solid 50px red; }

--------出现宽度高度不能正确显示，盒子大小明显偏小

--------原因：根据盒模型原理，在标准浏览器中上面示例的盒子大小显示为：宽度300px(width+padding-left+padding-right+border-left+border-right),但在IE中却只显示100px大小。

（9）不支持最小和最大尺寸

主要是“浏览器不支持CSS的min-height、min-width、max-height、max-width属性”。该问题主要存在于IE6及其以下版本浏览器中。（给栏目如<ul>定义最小宽度或高度，这样的好处是：在动态生成的栏目中是无法预知栏目的高度或宽度的，但是为了方便布局，设计师希望能够占据一定的宽度或高度，于是有min-width和min-height）

解决：

使用过滤器或者IE条件语句单独为IE6及其以下版本浏览器定义height和width属性。

例如：

#box{ width:400px; min-height:250px; border:solid 1px red; }

------此时对IE6及其以下版本浏览器无效。

解决：

* html #box{ height:100px; }

（10）看不到超链接中的图标

主要是“当在超链接中嵌套一个子标签时，如果希望利用超链接来动态显示子标签内容，就会出现控制失效问题”。

该问题主要存在于IE6及其以下版本浏览器中。

解决：

使用过滤器或IE条件语句单独为IE6及其以下版本浏览器定义height和width属性值。

例如：

</ul>

a{ font-size:16px; text-decoration:none; }

a img{ display:none; border:none; }

a:hover img{ display:inline; }

/*动态显示子标签失效*/

解决：

法一：

在超链接的鼠标经过状态时定义一个高度，由于a元素默认为行内元素，定义高度后不会影响其显示，但定义高度之后触发它能够正确解析子标签<img>的显示或隐藏。

a:hover{ height:1px; }

法二：

如果从安全角度考虑，还可以使用IE的私有属性zoom来触发超链接，正确解析包含的子标签。

a:hover{ zoom:1; }

（11）让超链接块状显示

主要是“超链接a元素默认为行内显示，由于行内元素不支持width和height属性，所以它定义大小是无效的。如果希望在超链接中定义背景图像，就会出现显示不全的问题”。

该问题存在于IE7及其以下版本浏览器中。

解决：

使用过滤器或者IE条件语句单独为IE6及其以下版本浏览器定义height和width属性值。

例如：

a{ text-decoration:none;

background:url(images/down2.gif) no-repeat center;

height:24px;

width:87px;

display:inline-block; /*行内块状显示*/

text-indent:-88px; }

/*对于inline-block行内块状显示的元素不支持width,height属性*/

解决：

a{ background：url(images/down2.gif) no-repeat center;

padding:12px 43px 12px 44px;

font-size:0;

zoom:1; }

/*为了兼容CSS行内块状显示，可以利用补白方式间接定义行内元素的大小，并借助font-size属性来间接隐藏字体*/

（12）包含框没有被撑开

主要是“当一个流动元素包含一个浮动元素时，这个包含框会自动收缩，而不是被浮动元素撑开”。该问题存在于所有浏览器中。

解决：

在包含框的底部添加一个空信息元素，并定义该元素清除浮动显示。

例如：

</div></div>

#wrap{ background:#FFCCFF; }

#box{ float:left; width:400px; height:200px; border:solid 1px red;}

/*栏目区域并没有显示包含框定义的背景色*/

解决：

</div>

</div>

.clear{ clear:both; }

/*此时外包含框的背景色就会显示出来（即包含框被被包含的内容撑开了）*/

（13）包含框没有高度了

主要是“当为包含框内的元素定义上下边界时，包含框不能自适应高度，以便包含子对象。

该问题存在于所有浏览器中。（原因：如果嵌套元素的边界没有被相互阻隔，则会出现边界重

叠现象，也就是说被包含元素的上边界会自动与包含框的上边界重叠，被包含元素的下边界会

自动与包含框的下边界重叠）

解决：

为包含框定义边框或者补白。

例如：

#wrap{ background:#FFCCFF; }

#wrap p{ marhin-top:80px;

margin-bottom:80px;}

/*包含框的高度并不是160px */

解决：

#wrap{ padding:1px;}

或者：

#wrap { border:1px solid red;}

/*为包含框定义边框或者补白，从而阻断相互嵌套元素的上下边界接触，防止发生重叠现象。*/

（14）部分栏目找不到

主要是“在特定条件下栏目内容看起来好像突然消失了，只有在重新刷新页面时才能出现，或者拖选隐藏的文本可以使其显示”。

该问题存在于IE6及其以下版本浏览器中。

解决：

为浮动元素后面的流动元素定义高度、宽度和zoom属性等来解决。

例如：

</div>

#wrap{ background:#FFCCFF; }

#left{ float:left; width:300px; height:200px; background:#CCCCFF; }

#header h1{ background:#6699CC; margin:0; }

#footer{ width:100%; clear:both; background:#9933CC; }

/*网页标题字样需要刷新才能显示出来。出现该现象的条件：

Ø 包含框中包含有浮动元素和流动元素，且包含框定义了背景色

Ø 浮动元素后面为一些流动元素，浮动元素的高度应该大于后面流动元素的高度

Ø 在流动元素的下面是一个清除元素

解决：

法一：

在浮动元素后面增加清除元素（清除元素就是定义了clear属性的元素），从而避免浮动元素对后面布局的影响。

即在上面”id=left”层后面增加一个层“<div class=”clear”></clear>”,在CSS样式的“#left{}”的后面添加”.clear{ clear:both; }”

法二：

在结构嵌套中应遵循最少的层次，尽量减少不必要的嵌套。

（15）栏目总是错行显示

主要是“满足下列条件：

Ø 当元素同时被定义了边界和浮动显示，且浮动方向和定义边界方向在同一方向上

Ø 浮动边相邻的是一个流动元素或包含框，而不是浮动元素”

该问题存在于IE6及其以下版本浏览器中

解决：

定义第一个盒子为行内显示

例如：

</div>

#wrap{ width:400px; border:solid 1px red; }

#wrap div{ float:left; width:196px; margin:2px; height:100px;}

/*出现浮动元素的错行显示*/

解决：

#box1{ display:inline;}

/*只要定义一个浮动盒子行内显示即可*/

（16）浮动元素不能并列显示（并列显示指若干个浮动元素合并在一起，不等价于行内显示）

主要是“当两个栏目并列浮动显示时，如果它们的宽度分别设置为50%，则第二个栏目将错行显示”。

该问题主要存在于IE7及其以下版本浏览器中。

解决：

为包含的子元素定义清除右侧浮动。

#wrap div{ clear:right;}

（17）栏目之间多出三个像素

主要是“当浮动元素与流动元素并列显示时，它们之间会存在3个像素的间距”。

该问题主要存在于IE6及其以下版本浏览器中。

解决：

使用过滤器专门为IE6及其以下版本浏览器定义样式。

（18）页面中突然多出了一个字符

主要是“当多个浮动元素中间夹杂有HTML注释时，如果浮动元素宽度为100%，则会在下面一行多显示一个上一行最后的一个字符”。

该问题存在于IE6版本浏览器中。

解决：

清除注释语句

（19）不能准确定位元素位置

主要是“当定义行内元素为包含块时，且包含块包含的绝对定位元素以百分比为单位进行定位时，就会出现参照物混乱的现象”。

该问题存在于IE6及其以下版本浏览器中。

解决：

为行内元素增加zoom属性，声明zoom属性值为1。

例如：

<span>页面

</span>

span{ position:relative; border:solid 1px red; }

#box{ position:absolute; width:100px; height:100px;

left:50%; top:50%; background:blue; }

/*标准状态下，div应该以span元素的宽度和高度来计算坐标值，但在IE6中，left:50%;top:50%;是根据窗口来计算x轴的50%坐标值，y轴坐标值计算不变，参考span元素的高度*/

解决：

span{ zoom:1; } /*缩放100%，触发布局*/

（20）无法调整定位元素的层叠顺序

主要是“当定位元素位于不同的结构中时，它们之间的层叠顺序不能以z-index属性来控制，定位元素的层叠顺序还要受结构关系的影响”。

该问题主要存在于IE7即其以下版本的浏览器中。

解决：

为包含块定义较大的层叠值。

例如：

</div>

#red{ left:50px; top:50px; background:red; z-index:1000;}

#blue{ left:100px; top:10px; background:blue; z-index:1;}

/*无论红盒子z-index值多大，在IE7及其以下版本浏览器中，该盒子总是显示在下面，

原因：

IE浏览器能够根据相同结构层次的定位元素进行比较，如果不在同一个结构层次，则会先比较相同层级的父元素，谁的父元素z-index属性值大，谁就在上面，而无论其子元素的z-index属性值有多大。

解决：

为红盒子的包含块（即父元素）定义较大的层叠值，即：

#wrap{ z-index:2; }

（21）找不到定位元素

主要是“当在一个包含块内并列浮动几个元素，它们的宽度之和正好等于包含块的宽度，这时如果在包含块内嵌入绝对定位元素，则该定位元素就会丢失”。

该问题存在于IE6及其以下版本浏览器中。

解决：

增加一个清除浮动元素，或者选用其它方法。

例如：

</div>

#wrap{position:relative; width:600px; height:300px;}

#left,#right{ float:left; width:300px;height:150px;}

#other{ position:absolute; width:80px; height:30px;}

/*在div中包含的两个子模块#left和#right的width值的和刚好等于div的width的值，此时在<div id=”wrap”>中嵌入一个div元素，用来设计标题栏，其中的标题块<div id=”other”>是使用绝对定位的方法来进行定位的，但在IE6中预览，这个绝对定位的元素突然消失了*/

解决

法一：

通过为每个栏目收缩一个像素边界，从而显示丢失的绝对定位元素。

#left,#right{ margin-left:-1px;}/*每个栏目收缩一个像素*/

法二：

直接为包含块增加2个像素（如果包含块包含三个<div>栏目，则包含块就应该增加三个像素）

#wrap{ width:603px;}

法三：

为包含的最后一个子栏目使用绝对定位，从而避免浮动元素占满整个包含块的空间。

#right{ position:absolute; //绝对定位

right:0; //向右对齐 }

法四：

可以在浮动元素和绝对定位元素之间增加一个清除浮动元素，从而强迫定位元素与浮动元素位于不同行中，从而显示出来。

即：

在上面的<div id=”other”>与<div id=”left”>之间增加<div class=”clear”>,然后设置

.clear{ clear:both; }即可实现浮动元素和绝对定位元素之间在两行上显示。

扩展：

IE 6及以下版本中对属性选择器还不支持。

1 自定义标签的使用：

（1）自定义名字空间不可以使用中文

（2）在使用自定义标签时，应该使用<namespace:自定义标签名>这样的形式，不能写成<自定义标签>这样的形式。

也就是说，自定义标签的名称前一定要指明它所在的“名字空间”

自定义标签的样式，既可以在<style>标签中设定，也可以在使用时设定它的style属性（内联式设定）。

在<style>标签中设定，例如：

article\:文章正文{border:1px solid #ccc;background-color:#efefef;font-weight:bold;}

</style>

注意，在<style>标签中设定样式时，在“名字空间”和“:”中间要加上“\”，例如上面写成article\:文章正文，不能写成article:文章正文(这里的名字空间指的是自定义标签名)

使用自定义标签时设定它的style属性，例如：

<article:文章标题 style="border:1px solid #ccc;">这里是文章的标题</article:文章标题>

举例：

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<head>

<title>使用自定义标签</title>

article\:文章正文{display:block; border:1px solid #ccc; background-color:#efefef; color:#00a;}

</style>

</head>

<body>

<article:文章标题 style="display:block; border:1px solid red; background-color:#FFF5F4; text-align:center; color:#f00;">

这里是文章的标题

</article:文章标题>

<article:文章正文>

这里是文章的正文

</article:文章正文>

</body

</html>

注释：自定义标签的display值默认是inline,在本例中，将其改为block方式显示。（display 属性设置元素如何显式，inline是默认，表示元素会被显示为内联元素，元素前后没有换行符。而设为block表示元素将显示为块级元素，此元素前后会带有换行符。）

2 IE6及以下版本中对属性选择器不支持，对!important命令不支持。

3 CSS中的background属性的设置：

background: url(4.jpg) right bottom no-repeat #FFFFFF

//注释：

//right表示背景图片右对齐，bottom表示背景图片底部对齐，no-repeat表示背景图片不重复，#FFFFFF表示背景的颜色。

即：

background:：background-color||background-image||background-repeat||background-attachment||background-position

( background-attachment表示背景图像是否随对象内容滚动，有默认值scroll，和fixed属性值 )

注：background-color的默认值：

background-color : transparent; //表示“清除超链接背景色”（表示背景色透明）

4 text-align属性：适用于块状元素，但只能够设计块状元素文本的水平对齐问题，而对于块状元素本身的水平对齐还需要使用CSS的margin属性。

注：

大部分浏览器支持“margin设置块状元素的水平对齐”特性，但IE浏览器的早期版本不支持这一规则。

在IE中任然可以用“text-align来设置块状元素水平对齐”。

块状元素的居中对齐：

margin-left:auto;

margin-right:auto;

5 vertical-align属性：适用于内联元素和单元格元素，不支持块状元素对齐，即只有当包含框显示为单元格时才有效。(但实际上具体跟浏览器有关)

例：

</div>

#box{

display: table-cell; //单元格显示

vertical-align： middle;

}

6 line-height（行高/行距）属性：

默认为1.2em，行高是以中线为准，减去字体大小值以后，平均上下空隙，如果值为奇数，则把多出的一个像素分给上边空隙或下边空隙。（对中文字体，则分给下边空隙，对英文字体，则分给上边空隙）

7 定义缩进

可以有text-indent定义首行缩进， padding设置对象内补丁。

但：

text-indent属性适用于“块状元素”，而padding属性适用于“所有元素”。

8 border-color属性：

border-color: color 或：

border-color: #fff #aaa #bbb #ccc //分别指定四个边框的颜色

9 定义图片透明度

各主要浏览器都自定义了专有透明属性。

（1）IE浏览器

使用CSS滤镜来定义透明度，用法：

filter:alpha(opacity=0~100);

(2)FF浏览器

定义了-moz-opacity私有属性，用于设计透明效果，用法：

-moz-opacity:0~1;

(3)W3C标准属性

定义了opacity属性，即：

opacity:0~1;

10 float属性：该属性的值指出了对象是否及如何浮动。

none :　默认值，对象不飘浮

left :　文本流向对象的右边

right :　文本流向对象的左边

11 list-style属性：

list-style: list-style-image||list-style-position||list-style-type

注：

list-style-position: outside|inside

设置或检索作为对象的列表项标记如何根据文本排列

outside：默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐

inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐

list-style-type：设置或检索对象的列表项所使用的预设标记。

12 表格的summary属性与<caption>标签的区别：

summary属性表示HTML表格摘要，并且不在网页中显示，而<caption>标签内容可以看得见。

13 caption-side属性：设置或检索表格( table )的 caption 对象是在表格的那一边。

top :　默认值。，caption 在表格的上边

right :　 caption 在表格的右边

bottom :　 caption 在表格的下边

left :　 caption 在表格的左边

注意： IE浏览器暂不支持cpation-side属性

14 border-style属性：

边框样式属性的优先级排序（从大到小）：

double(双线)、solid、dashed、dotted、ridge（3D凸槽）、outset（3D凹边）、groove（3D凹槽）、inset（3D凹边）

15 一个表只能有一个<thead>、一个<tbody>，和一个<tfoot>标记

16 border属性可以在任何对象中设置，如设置为solid，则会在对象的外围加上实线，显示出效果。但对于表格的单元格对象除外。

如：

td{ border-style:solid; } //它并不会显示出边框来

只有改为：

td{ border:solid 1px #000; } 才会显示边框

即：对于单元格对象来说，必须给边框border加上大小才能显示边框。

17 不同浏览器的默认样式：

IE： body元素的margin-left属性默认为10px

cursor属性默认hand

zoom是IE的私有属性，它能够定义元素的缩放比例

FF： body元素的margin-left属性默认为8px

Cursor属性默认为pointer

18 像素小数的问题：

像素是没有小数的

（1）IE：四舍五入

（2）其他浏览器：忽略小数值

19 z-index: 检索或设置对象的层叠顺序。但有个条件就是：

拿来比较的两个或多个元素必须处在同一个结构层次。

如果不在同一个结构层次，则先比较相同层级的父元素，谁的父元素的z-index属性值大，谁就在上面，而无需考虑子元素的z-index属性值的大小。

例：

</div>

#red{

z-index:100;

}

#blue{

z-index:1;

}

结果为：

蓝盒子覆盖红盒子

（注意：红盒子和蓝盒子的相同层级的父元素分别是：

#wrap和#blue）

20 注意：

<img>标签中的alt属性指的是：有关图形的短的描述

21 position:absolute;表示将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。