`
zhouyrt
  • 浏览: 1162005 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

IE6/7下form元素默认样式导致的bug

    博客分类：
  • BUG
CSSHTMLWeb 
阅读更多

Bug重现

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body style="padding:0 400px;">
         	
<div style="height:20px;border:1px solid gray;"></div>
<div style="border:1px solid #878787;border-top:0;">
	<form>
		<input type="text" />
	</form>		
</div>
            
</body>
</html>

 

 

IE6/7下以上两个div会断开，大概有10-20个px，截图如下：

 

IE6/7 and IE8(Q)

 

IE8/Firefox3.6/Safari4/Chrome7 dev/Opera10 则不会断开

 

去掉form或将form换成div则不会，初以为是form在IE6/7下的莫名bug，经路神，猪大肠等指点明白了。

 

首先，IE6/7下form的默认样式中margin不为0， 分别为1.12em 0，14.25pt 0。

见：http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm

 

再次，form的margin会发生塌陷，跑到父元素的外了，因此两个div之间断裂出现空白了。

 

关于margin塌陷见css 8.3.1：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

 

 

因此，写css reset时莫忘了重置form元素。

 

感谢他们两个。

 

 

 

 

  • 大小: 1.9 KB
分享到：
| JavaScript碎碎念
评论
2 楼 askjsp 2010-09-17  
so at the begining put a *{margin:0;padding:0;}
1 楼 darwintest 2010-09-16  
恩，form本来边距就不是0，最近刚做web发现的
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ie特有bug文档

    - **问题描述**：在IE6/7中，当子元素具有`position: relative`属性时，将父元素设置为`overflow: [hidden | auto]`等同于将子元素的定位模式重置为默认的`position: static`。 - **解决方案**：为父元素设置`...

    css浏览器兼容整理

    #### 一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSShack兼容一览表 为了确保网站能在不同的浏览器中呈现出一致的效果，了解和掌握各种CSS hack技巧是非常重要的。以下是一些常用且有效的CSS hack方法： 1. **区别IE...

    ie和ff兼容性大集合

    - **问题描述**：IE 和 FF 对于某些元素的默认样式处理不同，有时需要为不同的浏览器编写不同的 CSS 规则。 - **解决方案**： - 了解各种浏览器的默认样式差异，尽可能统一初始样式表。 - 使用条件注释或特定...

    css+div 在IE中兼容

    对于`ul`和`ol`列表元素，清除默认样式（如`list-style`）在IE和Firefox中的表现不同。在IE中，`margin`和`padding`的清除可能不起作用，而在Firefox中则可能需要额外的处理。 ### 5. CSS Filter IE通过私有的`...

    浏览器兼容性解决方法

    在处理`ul`和`ol`列表元素时，为了确保在IE和Firefox中表现一致，需要显式设置`list-style`、`margin`和`padding`属性，以避免默认样式的干扰。 #### 8. 不透明度设置 对于不透明度的设置，IE使用`filter`属性，而...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer，用来定时发起AJAX请求。 +2009-09-06 v2.1.0 -Button的Pressed属性值能够正确的反映客户端的变化。 -优化...

    hasLayout引发的CSS Bug表

    3. IE6和IE7中，包含hasLayout属性的标签默认具有高度。 4. 在form元素中，如果父元素包含hasLayout属性，子元素如input或textarea出现加倍的margin-left。 5. IE6和IE7中，父元素设置overflow: hidden或auto时，其...

    ExtAspNet_v2.3.2_dll

    -修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer，用来定时发起AJAX请求。 +2009-09-06 v2.1.0 -Button的Pressed属性值能够正确的反映客户端的变化。 -优化...

    浏览器兼容性汇总

    - **IE**: 某些情况下元素会不可见。 - **Firefox等其他浏览器**: 通常表现一致。 **解决方案**: 确保元素具有明确的尺寸和位置，使用绝对定位或固定定位。 ##### 15. float的div闭合;清除浮动;自适应高度 - **IE...

    浏览器兼容性问题

    - **问题描述**：不同浏览器对`ul`和`ol`的默认样式和缩进处理不一致。 - **解决方法**：使用CSS重置样式表来统一列表的样式。 ##### 8. 元素水平居中问题 - **问题描述**：在不同浏览器中，实现元素水平居中的...

    网页设计与制作(HTML+CSS).docx

    4. 浮动元素与浏览器兼容性：在早期的IE6浏览器中，浮动元素的外边距问题，即“双边距bug”，会导致设置的外边距变为两倍。 5. 内容溢出处理：在CSS中，`overflow`属性用于处理内容超出容器时的行为。`overflow:...

    400个DreamWeaver插件

    mxp/这个插件用来代替Dreamweaver File菜单下的New Form Template命令。作用是可以侦测出站点内的模板，这样就直接打开了，而不象以前还需要在对话框中选择 mxp/在代码编辑环境下，插入一个脚本函数，函数名和参数都...

    AspNetPager示例源码

    可设置分页导航元素（数字页索引、上页、下页、首页和尾页）的布局方式，该属性值是一个PagingButtonLayoutType枚举，通过设置该属性为PagingButtonLayoutType.UnorderedList或PagingButtonLayoutType.Span，允许将...

    前端面试题大集合

    - **块级元素**：默认情况下会独占一行，如`div`, `p`, `h1`至`h6`, `ul`, `ol`, `dl`, `table`, `form`等。 - **CSS盒模型**：由内容区（content）、内边距（padding）、边框（border）和外边距（margin）四部分...

    AspNetPager7.2分页控件及Demo源码

    6、兼容IE6.0+及FireFox 1.5+等浏览器 7、丰富而完整的控件文档和示例项目： 控件附带的完整的帮助文档及示例项目能够帮助您快速上手，熟悉AspNetPager控件的使用，您还可以通过给作者留言以及论坛提问等方式解决...

    AspNetPager 7.2 7.02控件源码与示例

    6、兼容IE6.0+及FireFox 1.5+等浏览器 7、丰富而完整的控件文档和示例项目： 控件附带的完整的帮助文档及示例项目能够帮助您快速上手，熟悉AspNetPager控件的使用，您还可以通过给作者留言以及论坛提问等方式解决...

    AspNetPager控件及Demo源码 v7.4.4.zip

    6、兼容IE6.0 及FireFox 1.5 等浏览器 7、丰富而完整的控件文档和示例项目： 控件附带的完整的帮助文档及示例项目能够帮助您快速上手，熟悉AspNetPager控件的使用，您还可以通过给作者留言以及论坛提问等方式解决...

Magicbox
Global site tag (gtag.js) - Google Analytics