Web设计札记

IE中处理空白字符的问题

按通常的理解,HTML文档中的空白字符如空格、回车、制表符等都应当被忽略,但IE处理这些字符时有可能会出现一些问题,尤其是和<img>标签相关的时候。

比如下面一段代码:

<div>
<img src="banner.png" />
</div>

在IE中的图片下方多出了不应有的空白,原因是<img>和<div>之间的回车被IE理解为空格,并在页面上显示出来。解决方法很简单:

<div><img src="banner.png" /></div>

现在就正常了。

在Firefox中不存在上述问题。

表单元素命名的细节问题

提交按钮的名字不要用简单的"submit",这个名字会让form对象的submit()方法失效。因为按钮在<form>之后出现,forms[0].submit就成了一个对象,导致forms[0].submit()失去作用。

同样的道理,在给其他表单元素命名是不要使用可能引起混淆的名字。

IE5.x和IE6.0对元素宽度的计算方法不一样,设计网页时要格外小心。

IE5.x中一个元素的实际宽度 = margin*2 + width,其中 width = border*2 + padding*2 + 内部空间,留给实际内容的只有 width - border*2 - padding*2

IE6.0中一个元素的实际宽度 = margin*2 + border*2 + padding*2 + width,实际内容的宽度就是 width

页面内容居中方法两则

其一:body 中定义 text-align:center,页面内容都放进一个 <div id="all"> 当中,定义 #all 为 width: 760px; margin: 0 auto; text-align: left。

其二:仍然把页面内容都放进 <div id="all"> 里面,定义 #all 为 width: 760px; position: absolute; left: 50%; margin-left: -380px。

CSS中属性的继承

body中的字体属性不能继承给 form 中的 input、textarea 等元素。你需要重新定义它们的外观。

IE 中另有一个继承的 bug,即 table 元素不能从 body 中继承字体属性,同样需要另外定义。

2006-03-01 181 css firefox html ie