在《CSS Mastery》一书的第5章中,作者说IE和Opera使用margin-left来缩进列表,而Safari和Firefox使用padding-left。经过我的实际测试,发现Opera 9(我实测的是Opera 9.23)同FF和Safari一样,也是使用padding-left的。更精确的说,它们的默认样式应该是:
ol, ul { padding-left:40px; }
而IE的默认样式是:
ol, ul { margin-left:30pt; }
Opera 8或者以前的版本是否和IE一样?有兴趣的同志可以自行测试。
但这至少说明一点,除了微软之外的浏览器厂商都达成一致意见,list的缩进应该使用padding来控制。其实这很好理解,缩进的是每一个item而不是整个的list。设计者对list有怎样的期望呢?比如说设置了ul的background:green,多数人应会期待整个ul(即包括了padding的部分)都使用绿色背景色,而不会希望在list的左侧缺失30pt(通常等于40px)。其次,marker部分(就是item之前的小圆点或者数字序号部分)是在li之外的,但从逻辑上说它属于list的一部分,在list之内。而IE使用margin,实际上就导致了marker部分是悬于list之外。实际上,如果list获得了layout(hasLayout),你就发现marker不见了!因为在IE臭名昭著的layout模型里,hasLayout之后,元素对象会自行处理其所占据区域的呈现,但是无法处理其区域之外。这也是其的width/height实际上类似min-width/min-height的原因,因为它无法绘制overflow到外面的部分。
<style>
ol { background:green; }
ol#myList2 { zoom:1; }
</style>
<ol id="myList1">
<li>First item...</li>
<li>Second item...</li>
<li>Third item...</li>
</ol>
<ol id="myList2">
<li>First item...</li>
<li>Second item...</li>
<li>Third item...</li>
</ol>
所以,比较好的方法就是给所有网页统一list的margin和padding,比如:
ol, ul { margin-left:0; padding-left:40px; }
或者也可以只针对IE进行修复:
ol, ul { _margin-left:0; _padding-left:40px; }
分享到:
相关推荐
在《CSS Mastery》一书的第5章中,作者说IE和Opera使用margin-left来缩进列表,而Safari和Firefox使用padding-left。经过我的实际测试,发现Opera 9(我实测的是Opera 9.23)同FF和Safari一样,也是使用padding-left...
#lstatistics ul, #lhotblog ul, #lrecent ul, #lapply ul{ list-style-type:none; padding-top:12px; padding-left:10px; padding-right:5px; margin:0px; } #lstatistics li{ text-align:left; padding-...
javascript实现显示和隐藏div方法汇总 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15种方法实现div显示和隐藏</title> [removed][removed] <...
margin:0; padding:0; font: bold 11px/1.5em Verdana; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px; } img { border: none; } ...
list-style:none; } #daohang ul li{ text-align:center; float:left; width:90px; } #daohang a{ background-image:url(images/bj01.jpg); display:block; margin:0px; padding-top:10px; padding-right:0...
.myDiv ul{ width:300px; list-style:none; margin:0; padding:0;height:30px} .myDiv ul li{ width:100px; float:left; border-right:1px solid #000; height:30px} .myDiv1{ width:300px; border:1px solid #000;...
div+css /* CSS Document */ body{margin:0px; padding:0px; background:url(images/mainbg.gif) 0 0 repeat-x #F6F4E4; color:#6B6854; font:14px/18px "Trebuchet MS", Arial, Helvetica...ul{list-style-type:none;}
静态网业模板,关于花卉的 body { background-color:#c0c0c0; font-family:Arial, Helvetica, sans-serif; padding:0; font-size:12px; margin:0px auto auto auto; color:#000000; } a{ color:#990000; } .clear{ ...
p, ul, ol { margin-top: 0px; line-height: 160%; } ul, ol { } a { color: #0098A4; } a:hover { text-decoration: none; } .alignleft { float: left; } .alignright { float: right; } .aligncenter { margin: 0...
ol,ul{list-style:none;margin:0;padding:0;} blockquote,q{quotes:none;} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;} table{border-collapse:collapse;border-spacing:0;} /*...
list-style-type:none; } #header { width:760px; height:303px; background-image:url(images/header.jpg); } #header ul { padding:272px 0 0 32px; width: 719px; } #header ul li { width:77px; ...
如果我们给 ul 加上一个背景或者框架,它就会露出原形,也就是在 IE 中项目符号是在 ul 外面,所以 ul 的宽度是不把项目符号算在里面的(如下图1);而 FF 是把项目符号算在 ul 里面的(下图2)。这样对 CSS 解释的...
UL { COLOR: #000000; FONT-SIZE: 70%; LIST-STYLE: square; MARGIN-BOTTOM: 0pt; MARGIN-TOP: 0pt } OL { COLOR: #000000; FONT-SIZE: 70%; LIST-STYLE: square; MARGIN-BOTTOM: 0pt; MARGIN-TOP: 0pt } ...
我的博客 #ul1 li{width:90px;color:white;float:left;margin-left:15px;..."><ul id="ul1"style="list-style:none;"> 我的博客 精彩看点 出行交通 饮食卫生 行走见闻 经典摄影 旅游购物 博客讨论 关于我 </ul>
ul,li,form,img {margin:0 padding:0 list-style: none border:none } /* 页面宽幅间距调整 */ .MainTop, .MainBody, .MainFooter {margin:0 10px } .MainTop {padding-top:3px } .MainBody {padding-top:0px } ....
健康系统,档案系统 ; charset=utf-8" /> 在线预约体检 <SCRIPT src="Images/setday.js"></SCRIPT> <!...ul { margin: 0px; padding: 0px; list-style: none; } body,td,th { font-size: 12px;
.produsts-page-list ul{ margin-right:0;} .produsts-page-list ul li{ width:31%; margin-right:0;} .produsts-page-list a{ width:90%;} .produsts-page-list ul li img{ width:96%;} .produsts-page-list .hmpro...
ul, ol { list-style:none; } input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";} input::-moz-focus-inner { border:none; padding:0; } select, input { vertical-align:middle; } ...
<ul class="slide-kun1363757193747content" style="padding-bottom: 0px; margin: 0px; padding-left: 0px; width: 1920px; padding-right: 0px; height: 550px; padding-top: 0px"> <li style="padding-...
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, ...