ol, ul { padding-left:40px; }; f1 A( @2 G% A( r" H0 D' e# h% x* @
而ie的默认样式是:
6 m& b1 f6 G; G1 `ol, ul { margin-left:30pt; }
* \0 G/ o. V D. n# c, Jopera 8或者以前的版本是否和ie一样?有兴趣的同志可以自行测试。 u2 H& K0 @( L6 a( b+ `
但这至少说明一点,除了微软之外的浏览器厂商都达成一致意见,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到外面的部分。
# K8 d* M' @9 gcss code复制内容到剪贴板+ h; x; ~' v- W% {% s
<style>! K& D& r& H, ]4 v* ?6 h
ol { background:green; } _- G+ x; M$ c: G7 M
ol#mylist2 { zoom:1; }
7 B' s- i" O- f9 ^- S/ R</style>
9 S6 F4 k+ [9 k. N# i<ol id=mylist1>
3 e5 i C( x" ]' ]- l<li>first item...</li>
" a9 ?: g' S5 X Y- r# w4 A& F& l1 d<li>second item...</li>4 S) ~7 r/ F% x# [0 @; R5 l# q' ]% T
<li>third item...</li> C# W9 d# g2 a8 P
</ol>
( z, O6 t: C5 { a. \, d' ~ M<ol id=mylist2>
6 L& n3 q- s! N' M<li>first item...</li>
! g' `2 s a' s- E9 v<li>second item...</li>
: D# ~" v2 z# S" ^2 H0 t' _<li>third item...</li>
, T. a5 ?6 h. {0 H</ol>+ ?# S6 B J3 {; Z2 v' T; N
所以,比较好的方法就是给所有网页统一list的margin和padding,比如:' a( I' X+ F9 S" [. ^' f
ol, ul { margin-left:0; padding-left:40px; }
0 E$ K. A5 X8 v) g0 e; Z或者也可以只针对ie进行修复:* }& j; J0 n' w U- C3 \9 ^% S
ol, ul { _margin-left:0; _padding-left:40px; }
6 s% ^3 u+ ` u' O3 R' Z0 G3 Y下面是其他网友的补充:. R& }/ f& e. t
ul标签的padding与margin默认值 40px
( F0 O9 r: ]; P% Rul标签的padding与margin默认值* x6 w! W. C- B: h6 D
ul标签在ff中默认只有padding值(即:padding-left:40px),而在ie中只默认有margin值(即:margin-left:40px),所以先定义 ul{margin:0;padding:0;}就能解决大部分问题。. f/ _# Q3 k7 z' F0 u
一般都在总样式规定一下:body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img {padding:0;margin:0;}5 P: v( A4 v! V
/ j5 D6 h: |- `( _3 |0 K
更多网页制作信息请查看: 网页制作 |
|