突然间,在Chrome下看起来很整齐的布局,在IE下变成一团糟。为了找出原因,我改动了div的background-color属性。最后,发现同一个DIV的宽度在IE和Chrome下却不一样。这大晚上的,真是怪吓人滴!
之后,做了个测试。当:
- div1
- {
- width:960px;
- margin:0px;
- padding:0px;
- }
div1
{
width:960px;
margin:0px;
padding:0px;
}
这时,在两个浏览器下是没有区别滴!总宽度均是960px。
但是,当:
- div1
- {
- width:960px;
- margin:0px;
- padding:0px 10px 0px 10px;
- }
div1
{
width:960px;
margin:0px;
padding:0px 10px 0px 10px;
}
这时,Chrome就不干了。她居然把padding的20px加在了外面,这样div1的总宽度就是960px+10px+10px=980px;而,在IE中div1的宽度仍是960px;
按照我的思维,感觉padding应该算在width里面滴,没想到Chrome这么倔。
经过测试,border和padding一样,margin的值均算在“width”的外面。
还有,在没有设置float的情况下,Chrome会把div1当成position:absolute,而IE会把其当成poisttion:relative;所以,尽量都这是块级元素的float为left!
真悲催,浏览器不兼容让我这个门外汉很痛苦呀!
分享到:
相关推荐
本文将深入探讨`DIV`边距属性在Chrome和Internet Explorer(IE)之间的差异,以及如何理解和解决这些问题。 首先,让我们来理解边距(margin)和填充(padding)的概念。边距是元素与周围元素之间的空间,而填充则...
针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器",这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **DOCTYPE的影响**: DOCTYPE声明会影响浏览器进入何种文档模式。在HTML4或...
Firefox和其他基于Webkit的浏览器(如Chrome)遵循W3C标准盒模型,其内容区域不包括边距和填充,而IE6-8则使用非标准的盒模型,内容区域包括边距和填充。解决方法是使用`box-sizing`属性,或在CSS中分别设定`width`...
然而,在实际应用中,由于不同浏览器的解析和渲染机制存在差异,尤其是在IE(Internet Explorer)和Firefox之间,这种差异可能导致兼容性问题。以下是对这些兼容性问题的详细梳理和解决策略。 1. **盒模型差异** -...
本文将详细介绍如何使基于div+css布局的网页在Internet Explorer(IE6, IE7, IE8, IE9)及Firefox、Chrome等现代浏览器中表现一致。 #### 1. DOCTYPE对CSS的影响 文档类型声明(DOCTYPE)是HTML文档的第一行,它...
要实现一个DIV元素在网页中水平和垂直居中,可以使用不同的CSS方法。这些方法的兼容性决定了它们能够适用于哪些浏览器版本。在上述文件中,给出了几种不同的实现方式,其中一些兼容现代浏览器如Chrome,同时也兼容较...
针对标题“如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器”以及描述“DOCTYPE 影响 CSS 处理”,我们将详细讨论CSS兼容性和DOCTYPE对CSS的影响,以及处理这些浏览器差异的策略。 1. **DOCTYPE与CSS...
这些问题主要出现在不同浏览器对CSS规范的解读和实现上存在差异,尤其是老版本的Internet Explorer(如IE6和IE7)与其他浏览器(如Firefox、Chrome等)之间。 首先,我们来探讨一下通用的解决方案。`height`属性在...
本文将深入探讨如何使用CSS+DIV来创建一个全屏页面上中下三行布局,并确保在各种浏览器中都能实现中间内容的居中显示。 首先,我们需要理解CSS的盒模型和定位概念。盒模型包括内容区域(content)、内边距(padding...
- 这两个属性在现代浏览器(如 Chrome、Firefox、Safari 和 Edge)中广泛支持。 - 在 Internet Explorer 中也支持这两个属性。 #### 设置 div 高度和宽度 1. **使用 `style` 属性:** - **定义**:可以使用 `...
在网页设计与开发中,CSS(Cascading Style Sheets)和HTML中的DIV元素是构建现代网页布局的核心技术。CSS+DIV后台框架是一种基于这两种技术的网页布局解决方案,用于创建高效、灵活且易于维护的后台管理界面。这种...
- **自动边距处理**:在Firefox中,如果`div`元素的`margin-left`和`margin-right`属性都设置为`auto`,则该元素会被居中显示;而在IE中则不会发生这种情况。 - 解决方案:可以使用`text-align: center`并给`div`...
- `cursor`属性在IE中支持`pointer`值,但在Firefox和其他浏览器中则使用`hand`。 - 示例代码: ```css a { cursor: pointer; /* IE */ cursor: hand; /* 其他浏览器 */ } ``` #### 五、结论 总的来说,...
而在FF和Chrome中,由于存在内边距,`div`的实际宽度和高度会小于100%。 ### 总结 通过上述示例可以看出,IE与FF在实现标准方面存在一定的差异,这给Web开发者带来了不少挑战。为了确保网站能在不同浏览器中正常...
在Web开发中,浏览器兼容性问题是一个常见的挑战,尤其是涉及到不同的浏览器如何解析和渲染CSS(层叠样式表)样式。本文主要探讨IE浏览器(Internet Explorer)和火狐浏览器(Firefox)之间的兼容性问题,特别是CSS...
这里我们讨论的问题集中在Internet Explorer 6(简称IE6)浏览器中,一个非常著名的bug,涉及到`relative`定位和`right`属性的使用。在IE6中,当一个绝对定位的元素(`position: absolute`)的父级元素设置了`...
通过CSS,我们可以控制Div元素的宽高、颜色、字体、边距等属性,实现精细的布局控制。 2. **导航栏设计**:导航栏是网站的重要组成部分,通常包含主导航、次导航、面包屑导航等,用于引导用户浏览网站内容。好的...