`
liss
  • 浏览: 842272 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

padding和margin在各种浏览器中的差异

    博客分类:
  • CSS
阅读更多

      padding和margin可以让一块区域的外观显示完全一样。所以可能让很多人认为padding和margin是可以互换。其实它们的差别很大,而且选择哪个需要认真和慎重地考虑。我认为对容器使用padding还是对容器内的标签使用margin的原则:当隐藏这个容器或者容器内的标签时(现实项目中其实经常需要将某个部件隐藏、显示),对整体布局影响最小为益。


  对于padding:ie6,ie7(FF)对带有padding样式的标签的宽度的解析是不一样的。ie6的标签宽度不包含padding-left和padding-right的值,而ie7和ff则是包含的。例如一个div的width设置100px,padding设为10px,而在ie6中它要占据的宽度是120px(包含10个padding-left和10个padding-right),而在ie7和ff中则占据100px的宽度。因为ie7和ff会认为100已经包含了20px的padding。

分享到:
评论

相关推荐

    各浏览器padding、margin的差异

    面对浏览器间的`padding`和`margin`差异问题,开发者可以通过多种策略来确保页面在各种浏览器中表现一致。无论是利用CSS Hack针对性地调整样式,还是采用成熟的CSS Reset或Normalize.css方案,甚至是借助现代前端...

    CSS在不同浏览器中兼容问题

    不同的浏览器对 CSS 的解析和渲染方式存在差异,从而导致相同的 CSS 代码在不同浏览器中显示效果不同。本文将总结常见的 CSS 兼容问题和解决方法。 一、CSS 样式的差异 * 字串 8ul 和 ol 的默认 padding 值不同,...

    CSS的margin和padding

    在不同的浏览器中,`margin`的实现可能存在差异。尤其是在IE浏览器和其他标准浏览器(如Firefox、Chrome、Opera、Safari)之间,一些特定的`margin`使用情况可能会导致布局显示不一致,比如垂直外边距合并问题。IE的...

    关于ol和ul的padding和margin默认值

    这些列表元素在不同的浏览器中可能有不同的默认样式,尤其是涉及到`padding`和`margin`属性。`padding`是元素内部边距,而`margin`是元素与周围元素之间的空白区域。 在《CSS Mastery》一书中提到,Internet ...

    常用元素默认margin和padding值问题探讨

    而在这些视觉样式定义中,margin(外边距)和padding(内边距)是非常常用的两个属性,它们用于调整元素与元素之间的空间以及元素内容与元素边界之间的空间。由于不同的浏览器可能会有不同的默认样式,因此开发者在...

    margin-top在火狐和IE的区别

    标题“margin-top在火狐和IE的区别”涉及的是网页布局中关于CSS属性`margin-top`在不同浏览器,尤其是Firefox和Internet Explorer(IE)之间表现不一致的问题。在描述中提到,当设置`margin-top`时,可能会导致定位...

    2016年度最全整理浏览器兼容性问题与解决方案

    浏览器兼容性问题一直是前端开发中的重要议题,尤其是在2016年及以前,各种浏览器的市场份额和解析标准差异较大,导致开发者需要面对多种浏览器的显示差异。本文将针对标题和描述中提到的常见浏览器兼容性问题及其...

    浏览器兼容性解决方法

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

    浏览器兼容性.pdf

    解决方法是在CSS中使用通配符`*`重置所有元素的margin和padding为0,即`*{margin:0;padding:0;}`,这是最简单也是最常用的一种兼容性问题解决方案。 2. 块级元素使用浮动后,外边距在IE6中显示异常。常见的布局方式...

    常见浏览器兼容性问题与解决方案

    总结来说,解决浏览器兼容性问题需要对各种浏览器的解析规则有深入理解,通过适当的CSS技巧和Hack方法来确保在不同浏览器下的表现一致性。对于严谨的前端开发者,这不仅是提升用户体验的必要工作,也是提高代码可...

    常见浏览器兼容问题

    - **问题描述**:由于不同的浏览器对于默认的 `margin` 和 `padding` 处理方式不同,这可能导致页面布局出现差异。 - **解决方法**: - 使用CSS Reset技术来统一不同浏览器的默认样式。例如,可以使用通配符选择器...

    浏览器兼容

    在IE浏览器中,块级元素的背景色仅覆盖`padding`和内容区域,而在Firefox中,背景色还会延伸到`border`区域。这意味着同样的CSS样式在不同浏览器下可能呈现不同的视觉效果。 为了解决这个问题,开发者需要仔细规划...

    CSS在不同浏览器的兼容性问题

    标题中的“CSS在不同浏览器的兼容性问题”指的是在各种Web浏览器中,CSS(层叠样式表)的解析和执行存在差异,导致网页在不同浏览器上显示不一致的现象。这通常给前端开发者带来挑战,因为他们需要确保网页在所有...

    常见浏览器兼容问题处理办法.pdf

    不同浏览器对标签的默认样式处理存在差异,例如margin和padding。解决方法是在CSS文件中使用通配符`*`,设置`*{margin:0;padding:0;}`,确保所有标签的内外补丁初始化为0。这能避免因默认样式差异导致的布局混乱。 ...

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

    解决方法是使用`box-sizing`属性,或在CSS中分别设定`width`和`padding`。 4. **CSS优先级与`!important`**: Firefox支持`!important`规则,但IE6不支持。若要为Firefox设置特定样式,可以使用`!important`。例如...

    如何让css在所有浏览器下兼容

    本文将详细介绍如何使CSS在各种浏览器(包括但不限于IE6、IE7、IE8以及现代浏览器如Firefox和Chrome)下兼容。 #### 一、使用条件性注释和特殊CSS规则 **1. 条件性注释** 条件性注释是一种专门针对Internet ...

    jsp浏览器的兼容性

    FF、IE 和谷歌中对 BOX 的理解存在差异,导致相差 2px 的问题,可以使用 *{margin: 0 auto; padding: 0; overflow: hidden;} 解决。 13. css 布局中的居中问题 在 css 布局中,居中问题可以通过在父级元素定义 ...

Global site tag (gtag.js) - Google Analytics