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

IE6/7/8/9中table元素align=center权重比margin:0大

CSSChromeIESafariFirefox 
阅读更多

重现很简单，如下

 

<!DOCTYPE html>
<html>
<head>
<style>
    * {margin:0;}
</style>
</head>
<body style="padding:50px;">
	<div style="border:1px solid gold;width:400px;padding:10px 0;">
    <table width="100" bgcolor="red" align="center">
        <tr><td>aaa</td><td>bbb</td></tr>
    </table>
	</div>
</body>
</html>

 

 

以上css代码清空了所有元素的默认margin，这个样式规则几乎所有网站的reset.css中都会有。
table元素添加了align=center。

各浏览器下表现如下
1，IE6/7/8/9中table居中


2，Firefox/Chrome/Safari/Opera中table没有居中（居左）

这个错误很容易发生，关键是清空margin:0，这个规则多数写在reset.css中，而又想让table使用align属性居中，但这仅在IE浏览器中达到预期想过。

 

  • 大小: 408 Bytes
  • 大小: 480 Bytes
4
顶
11
踩
分享到：
| IE6/7/8中Option元素未设value时Select将 ...
评论
发表评论

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

相关推荐

    IE6/7/8/9中table元素align=center权重比margin:0大的实例说明

    在IE6/7/8/9这四个较旧版本的IE浏览器中，`align="center"`属性被正确地应用，使得表格居中显示。然而，在Firefox、Chrome、Safari和Opera等现代浏览器中，表格并未居中，而是靠左显示。这是因为这些浏览器遵循更...

    编写出色CSS代码的13个建议小结

    然而，全局Reset（如`*{margin:0;padding:0;}`）应避免使用，因为它会降低效率，且可能对不必要的元素产生副作用。推荐参考YUI Reset和Eric Meyer的重置方法，根据项目需求灵活调整，以保持良好的浏览器兼容性和易用...

    最全前端面试题-2（css篇-上百篇题集整理1个月）

    水平居中对行内元素可以使用`text-align: center`，对块级元素可以使用`margin: 0 auto`或`position: absolute`结合`left: 50%`和`transform: translateX(-50%)`。垂直居中则可以使用`line-height`等于`height`，`...

    45道CSS基础面试题（附答案）.pdf

    而低版本的IE浏览器采用的盒子模型中，元素的宽度或高度仅包括内容区的宽度或高度，边框和内边距都包含在设定的宽度或高度之内。这种差异导致了在不同浏览器中的布局表现不一致，为了解决这个问题，CSS3引入了`box-...

    尚硅谷_前端_面试题

    创建BFC的方式有：`float`属性、`position: absolute/fixed`、`display: inline-block/inline-table/table-caption/table/table-cell/table-column/table-column-group`、`overflow: hidden/auto/scroll`、`display:...

    web前端面试题.pdf

    display属性可以将行内元素转换为块级元素、将块级元素转换为行内元素、转换为内联元素等。 8. CSS选择符 CSS选择符包括id选择器、类选择器、标签选择器、相邻选择器、子选择器、后代选择器、通配符选择器、属性...

    前端面试宝典V4.0--2022.1.pdf

    W3C标准盒模型（IE盒模型不一致）中，元素的总宽度和总高度等于内容区域加上内边距和边框。 5. **CSS选择器优先级**：选择器的优先级由组合器决定，数字依次为ID选择器（100）、类选择器（10）、属性选择器和伪类...

    android笔记.txt

    - `android:layout_weight`：用于设置控件在父容器中的权重，常用于动态调整多个控件的大小比例。 - `android:layout_margin`：用于设置控件外部的边距，类似于`padding`，但作用于控件本身而不是内部内容。 以上是...

    前端面试宝典(1)1

    水平居中可通过设置`margin: 0 auto`或使用`flexbox`布局实现，垂直居中可以使用`line-height`、`display: table-cell`、`position: absolute`配合`transform`或者`flexbox`和`grid`布局。 5. **img元素垂直居中**...

    前端面试复习篇(54题)..pdf

    块级元素通过margin:0 auto实现；绝对定位元素配合transform或flex实现水平居中；表格布局可以实现水平垂直居中；flex布局通过justify-content和align-items可以实现水平和垂直居中。 选择器优先级涉及到CSS样式的...

    前端面试题

    - **居中浮动元素**：可以通过父元素设置`text-align: center`实现居中。 - **绝对定位居中**：设置`left: 50%`和`top: 50%`，然后通过`transform: translate(-50%, -50%)`调整位置。 **06、display有哪些值？说明...

    面试宝典指南大全

    可以通过设置父元素的text-align属性为center，结合自动外边距margin: 0 auto实现浮动元素的水平居中。 45. **浏览器内核与兼容性问题** 不同浏览器内核的兼容性问题是前端开发的常见问题，解决方法包括添加...

    html标签默认样式整理

    table是表格，tr是表格行，thead、tbody和tfoot分别代表表格的头部、主体和底部，col和colgroup用于定义列，而td和th是单元格，th还有默认的bolder字体权重和center对齐方式，表示表头。 h1到h6标题标签有不同的...

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