CSS问题

mail_ylei 2010-03-09 05:11:36

width:2;
width:2px;
这两者有什么区别呢？

...全文

140 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

LuZhou 2010-03-10

打赏
举报

建议用width:2px;规范！

hanqingyu 2010-03-10

打赏
举报

1.高度的区别

IE:在没有定义高度时候，将根据内容高度的变化，包括未定义高度的图片内容；

在定义了高度时候，当内容超过高度时，将使用实际内容的高度。

FF:在没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；

在当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。

建议：在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，尽量不用使用边框样式。

2.宽度的区别

IE:内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding宽度-border宽度。

IE中定义 width:100px;padding:5px 的话，所显示的宽度就是100px。

FF:容器占的宽度=内容宽度+padding宽度+border宽度。

Firefox中定义 width:100px;padding:5px 的话，所显示的宽度就是105px。

建议：使用 !important；但是，!important一定要在前面。

如：width:95px !important;width:100px;padding:5px;。

注：高度亦是如此！

3.浮动（float）的区别

（1）空格处理

IE:对于DIV并排时候使用float关键字时候，IE对块与块之间的空格是处理的。

FF:对于DIV并排时候使用float关键字时候，Firefox对块与块之间的空格是不处理的。

建议：经常发现使用float关键字时候在Firefox显示正常，但是在IE中会出现空格，就是这个原因；

避免在div连div时候添加空格或者回车，也即是一个div紧接这一个div写；

或者，将div放入li中进行处理，这样就不会有空格的问题。

（2）Margin加倍

IE:在使用float的情况下，IE的margin加倍。

FF:正常显示。

建议：针对IE，添加display:inline;

相应的css为

#float{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/

}

4.鼠标位置处理

IE:获取事件鼠标位置时，IE用的是event.x和event.y，并且值在不加单位的情况下可以直接使用,IE提供默认单位；

div.style.left = event.x

div.style.top = event.y

此时，div显示的位置为鼠标的位置。

FF:获取事件鼠标位置时，Firefox用的是MouseEvent.pageX和MouseEvent.pageY，并且在不加单位的情况下直接赋值后，无效；必须添加单位。

div.style.left = MouseEvent.pageX

div.style.top = MouseEvent.pageY

此时，div显示的位置为0，0.

建议：都添加单位,无论针对IE或者Firefox都有效。

IE：div.style.left = event.x+'px'

div.style.top = event.y+'px'

FF：div.style.left = MouseEvent.pageX+'px'

div.style.top = MouseEvent.pageY+'px'

hanqingyu 2010-03-10