CSS：Chrome 和 Safari 似乎为宽度“添加”边框，而 IE、Firefox 和 Opera 没有

Posted 2023-03-06

【中文标题】CSS：Chrome 和 Safari 似乎为宽度“添加”边框，而 IE、Firefox 和 Opera 没有

【英文标题】：CSS: Chrome and Safari seem to 'add' border to width, while IE, Firefox & Opera don't

【发布时间】：2011-02-01 15:34:47

【问题描述】：

我正在尝试为我的网站实现跨浏览器的一致性。

关于这个页面：http://www[insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html（请注意，我不希望这个 URL 被 seo-bots 抓取）

如果您在 IE、Firefox 或 Opera 中查看此页面，一切都很好，但在 Chrome 和 Safari 中，表格有点不合时宜（您可能会清楚地注意到）。

似乎是什么问题？

在我看来，在 Chrome 和 Safari 中，左右边框 (2px) 总共添加到设置的表格宽度中，而在其他浏览器中，边框被视为宽度的一部分。

（最）相关的 CSS 行如下（来自 table.css 文件，也可通过页面的源文件获得）：

table.uitbetaling 
 margin: 11px 18px 10px 19px;
 border: 1px solid #8ccaee;
 width: 498px;
 padding: 0;

table.uitbetaling img, table.uitbetaling td 
 margin: 0;
 border: 0;
 padding: 0;
 width: 496px;

table.uitbetaling tr 
 margin: 0;
 border: 0;
 padding: 0 1px 0 0;

所以基本上我使用了表格结构来组织图像，如下所示：（表格的类是uitbetaling）

<table>
<tr><td><img /></td></tr>
<tr><td><img /></td></tr>
...
<tr><td><img /></td></tr>
</table>

如果在这里我将table.uitbetaling 和table.uitbetaling img, table.uitbetaling td 的宽度设置为相同的值（例如496 或498），Chrome 和Safari 中的“问题”就解决了，但是在Firefox 中右侧边框比空白。因为右侧边框不能“适应”了。 img 和 td 必须至少比 table.uitbetaling 窄 2px，这样右边框才能在 Firefox 中可见。

有没有办法解决这个问题？

【问题讨论】：

顺便说一句；根据荷兰法律，该网站是否合法？

"请注意，我希望这个 URL 不能被 seo 机器人抓取" 太晚了。您排名第一，该页面在 Google 上排名第二。这就是他们制作 htaccess 的目的。

关于可抓取性：所有主要机器人都尊重robots.txt。只需告诉他们离开：robotstxt.org

你有没有成功解决过这个问题？您还需要这方面的帮助吗？

【参考方案1】：

现在您应该使用 HTML5 文档类型，如果您在将边框添加到元素宽度时遇到问题，请查看 CSS 样式：box-sizing

border-box - 包括边框宽度/高度和填充宽度/高度，或者基本上您设置的宽度包括边框/填充

content-box - 您在元素上设置的宽度仅为内容区域，不包括填充或边框

还有一个我不使用的padding-box，一般以上两个就够了。

现在，我认为 IE8 使用的 box-sizing 与 Chrome/FF 等不同，这就是有时您会遇到问题的原因。您始终可以调试并检查 box-sizing 的设置。

注意：如果您没有 DOCTYPE，那么您处于 quirks 模式，并且 IE 在 box-sizing/box 模型上与 Chrome/FF 完全不同 - 这就是您的问题

【参考方案2】：

将您的代码分割成最简单的元素并在每个浏览器上进行测试。当您发现差异时，您可以使用不同的浏览器检测方法来巧妙地更改每个实例的代码。话虽如此......如果你不想发疯，CSS会做的更多，如果可以的话，让像素去吧。

【参考方案3】：

为了安全起见，我一般都是这样开表的：

<table cellspacing="0" cellpadding="0">

它是“旧”HTML，但至少它强制浏览器保持一致性，然后我根据需要应用 CSS。

【参考方案4】：

我检查过 Opera 11、Google Chrome 7.0.517.44 和 FireFox 3.6.12 发现与您的网站设计没有区别。

【讨论】：

他可能在 7 个月前修好了！

/我笑了。我想不仅是他。

【参考方案5】：

您是否声明了 DTD (DOCTYPE)？

阅读：

http://msdn.microsoft.com/en-us/library/bb250395.aspx

看起来浏览器有不同的边框显示方式，但 DOCTYPE 声明（位于 html 文档的顶部）强制它们符合实际标准，至少在 css 框模型方面。

注意：我总是使用 xhtml 过渡 DTD 来使我的文档尽可能兼容...

祝你好运！

【参考方案6】：

试试：

tableborder-collapse:collapse;

【参考方案7】：

最好始终在 css 中设置 tableborder-collapse:collapse;，然后在 html 中使用 cell-padding="0" 和 cell-spacing="0"。