根据老板的需求修改web page中的footer的时候发现了<span>的宽度有问题,HTML的结构大致如下:
其中样式footTag指定了width,但是尝试了很久发现span的宽度无论如何也不能按照CSS的定义显示…… 但是如果换成DIV或是用 display: block 就可以。在Google了不少keyword之后终于发现了一篇相关的解释。到W3C的CSS 2.1规范里具体找了一下,果然发现:
<div style="margin: 0pt 260px; width: 380px;">
<span class="footTag">About</span>
<span class="footTag">Partners</span>
<span class="footTag">Advertise</span>
</div>
<div style="margin: 6px 0pt; clear: left;">
© 2008 Company-Name
</div>
<span class="footTag">About</span>
<span class="footTag">Partners</span>
<span class="footTag">Advertise</span>
</div>
<div style="margin: 6px 0pt; clear: left;">
© 2008 Company-Name
</div>
其中样式footTag指定了width,但是尝试了很久发现span的宽度无论如何也不能按照CSS的定义显示…… 但是如果换成DIV或是用 display: block 就可以。在Google了不少keyword之后终于发现了一篇相关的解释。到W3C的CSS 2.1规范里具体找了一下,果然发现:
10.3.1 Inline, non-replaced elements
The 'width' property does not apply. A computed value of 'auto' for 'left', 'right', 'margin-left' or 'margin-right' becomes a used value of '0'.
有空一定要仔细看看规范~做WEB开发的至少先将CSS、JavaScript和DOM混个脸熟,然后再研究不同browser的特性。
评论