`
snoopy7713
  • 浏览: 1147096 次
  • 性别: Icon_minigender_2
  • 来自: 火星郊区
博客专栏
Group-logo
OSGi
浏览量:0
社区版块
存档分类
最新评论

DIV的边距属性在Chrome和IE中的区别

    博客分类:
  • html
阅读更多

突然间,在Chrome下看起来很整齐的布局,在IE下变成一团糟。为了找出原因,我改动了div的background-color属性。最后,发现同一个DIV的宽度在IE和Chrome下却不一样。这大晚上的,真是怪吓人滴!
之后,做了个测试。当:

Css代码 复制代码 收藏代码
  1. div1
  2. {
  3. width:960px;
  4. margin:0px;
  5. padding:0px;
  6. }
div1
{
width:960px;
margin:0px;
padding:0px;
}


这时,在两个浏览器下是没有区别滴!总宽度均是960px。
但是,当:

Css代码 复制代码 收藏代码
  1. div1
  2. {
  3. width:960px;
  4. margin:0px;
  5. padding:0px 10px 0px 10px;
  6. }
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和IE中的区别深入理解

    本文将深入探讨`DIV`边距属性在Chrome和Internet Explorer(IE)之间的差异,以及如何理解和解决这些问题。 首先,让我们来理解边距(margin)和填充(padding)的概念。边距是元素与周围元素之间的空间,而填充则...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.pdf

    针对标题提及的"如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器",这里将详细讨论一些关键的CSS兼容性问题及解决方案。 1. **DOCTYPE的影响**: DOCTYPE声明会影响浏览器进入何种文档模式。在HTML4或...

    div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法[借鉴].pdf

    Firefox和其他基于Webkit的浏览器(如Chrome)遵循W3C标准盒模型,其内容区域不包括边距和填充,而IE6-8则使用非标准的盒模型,内容区域包括边距和填充。解决方法是使用`box-sizing`属性,或在CSS中分别设定`width`...

    DIV+CSS网页中IE和火狐兼容问题的整理

    然而,在实际应用中,由于不同浏览器的解析和渲染机制存在差异,尤其是在IE(Internet Explorer)和Firefox之间,这种差异可能导致兼容性问题。以下是对这些兼容性问题的详细梳理和解决策略。 1. **盒模型差异** -...

    div+css_兼容ie6_ie7_ie8_ie9和FireFox_Chrome等浏览器方法

    本文将详细介绍如何使基于div+css布局的网页在Internet Explorer(IE6, IE7, IE8, IE9)及Firefox、Chrome等现代浏览器中表现一致。 #### 1. DOCTYPE对CSS的影响 文档类型声明(DOCTYPE)是HTML文档的第一行,它...

    css实现div水平、垂直居中兼容chrome、ie8

    要实现一个DIV元素在网页中水平和垂直居中,可以使用不同的CSS方法。这些方法的兼容性决定了它们能够适用于哪些浏览器版本。在上述文件中,给出了几种不同的实现方式,其中一些兼容现代浏览器如Chrome,同时也兼容较...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器

    针对标题“如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器”以及描述“DOCTYPE 影响 CSS 处理”,我们将详细讨论CSS兼容性和DOCTYPE对CSS的影响,以及处理这些浏览器差异的策略。 1. **DOCTYPE与CSS...

    div+css常见兼容性问题

    这些问题主要出现在不同浏览器对CSS规范的解读和实现上存在差异,尤其是老版本的Internet Explorer(如IE6和IE7)与其他浏览器(如Firefox、Chrome等)之间。 首先,我们来探讨一下通用的解决方案。`height`属性在...

    全屏css+DIV页面上中下三行布局,兼容各浏览器中间居中显示

    本文将深入探讨如何使用CSS+DIV来创建一个全屏页面上中下三行布局,并确保在各种浏览器中都能实现中间内容的居中显示。 首先,我们需要理解CSS的盒模型和定位概念。盒模型包括内容区域(content)、内边距(padding...

    javascript获取设置div的高度和宽度兼容任何浏览器.docx

    - 这两个属性在现代浏览器(如 Chrome、Firefox、Safari 和 Edge)中广泛支持。 - 在 Internet Explorer 中也支持这两个属性。 #### 设置 div 高度和宽度 1. **使用 `style` 属性:** - **定义**:可以使用 `...

    CSS+DIV后台框架

    在网页设计与开发中,CSS(Cascading Style Sheets)和HTML中的DIV元素是构建现代网页布局的核心技术。CSS+DIV后台框架是一种基于这两种技术的网页布局解决方案,用于创建高效、灵活且易于维护的后台管理界面。这种...

    div+css布局时的浏览器兼容问题

    - **自动边距处理**:在Firefox中,如果`div`元素的`margin-left`和`margin-right`属性都设置为`auto`,则该元素会被居中显示;而在IE中则不会发生这种情况。 - 解决方案:可以使用`text-align: center`并给`div`...

    DIV+CSS浏览器兼容方法的总结

    - `cursor`属性在IE中支持`pointer`值,但在Firefox和其他浏览器中则使用`hand`。 - 示例代码: ```css a { cursor: pointer; /* IE */ cursor: hand; /* 其他浏览器 */ } ``` #### 五、结论 总的来说,...

    IE_FF兼容性

    而在FF和Chrome中,由于存在内边距,`div`的实际宽度和高度会小于100%。 ### 总结 通过上述示例可以看出,IE与FF在实现标准方面存在一定的差异,这给Web开发者带来了不少挑战。为了确保网站能在不同浏览器中正常...

    IE浏览器和火狐浏览器兼容问题.doc

    在Web开发中,浏览器兼容性问题是一个常见的挑战,尤其是涉及到不同的浏览器如何解析和渲染CSS(层叠样式表)样式。本文主要探讨IE浏览器(Internet Explorer)和火狐浏览器(Firefox)之间的兼容性问题,特别是CSS...

    IE6中DIV使用了relative不定义宽度导致right定位误差

    这里我们讨论的问题集中在Internet Explorer 6(简称IE6)浏览器中,一个非常著名的bug,涉及到`relative`定位和`right`属性的使用。在IE6中,当一个绝对定位的元素(`position: absolute`)的父级元素设置了`...

    导航经典推荐的23种div+css代码

    通过CSS,我们可以控制Div元素的宽高、颜色、字体、边距等属性,实现精细的布局控制。 2. **导航栏设计**:导航栏是网站的重要组成部分,通常包含主导航、次导航、面包屑导航等,用于引导用户浏览网站内容。好的...

Global site tag (gtag.js) - Google Analytics