CSS：Chrome 和 Safari 似乎“添加”了 CSS边框为宽度，而 IE、Firefox 和 IE 为宽度。歌剧不要
我正在努力实现我的网站的跨浏览器一致性。
这是关于此页面的： http://www [insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html（请注意，我不希望此网址可供 seo 机器人抓取）
如果您在 IE、Firefox 或 Opera 中查看此页面，一切都很好，但在 Chrome 和 Safari 中，表格有点不协调（您可能会清楚地注意到）。
似乎有什么问题？
在我看来，在 Chrome 和 Safari 中，左右边框（2px）总共添加到设置的表格宽度中，而在其他浏览器中，边框被视为宽度的一部分。
（最）相关的 CSS 行如下（来自 table.css 文件，也可通过页面的源文件获取）：
table.uitbetaling { 边距：11 像素 18 像素 10 像素 19 像素； 边框：1px实线#8ccaee； 宽度：498px； 填充：0； } 表.uitbetaling img, 表.uitbetaling td { 保证金：0； 边框：0； 填充：0； 宽度：496 像素； } 表.uitbetaling tr { 保证金：0； 边框：0； 内边距：0 1px 0 0； }
所以基本上我使用了表结构来组织图像，如下所示：（表的类是 uitbetaling）
<前><代码><表>;>
> ...
>
如果在这里，我将 table.uitbetaling 和 table.uitbetaling img, table.uitbetaling td 的宽度设置为相同的值（例如都是 496 或 498），Chrome 和 Safari 中的“问题”已解决，但在 Firefox 中，右侧边框为空白。因为右侧边框不再“适合”了。 img 和 td 必须比 table.uitbetaling 至少窄 2px，右边框在 Firefox 中可见。
有什么办法可以解决这个问题吗？
I'm trying to achieve cross-browser consistency for my website.
It's about this page: http://www[insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html (please note that I prefer this URL not to be made crawlable for seo-bots)
If you view this page in IE, Firefox or Opera, everything is fine, but in Chrome and Safari the tables are a little out of line (as you'll probably clearly notice).
What seems to be the problem?
It appears to me that in Chrome and Safari the left and right border (2px) in total are added to the set table width, while in the other browsers the border is considered part of the width.
The (most) relevant CSS-lines are the following ones (from the table.css file, also available through the page's source file):
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; }
So basically I have used a table-structure to organize images, like this: (the class of the table is uitbetaling)
<table> <tr><td><img /></td></tr> <tr><td><img /></td></tr> ... <tr><td><img /></td></tr> </table>
If, here, I set the width of table.uitbetaling and table.uitbetaling img, table.uitbetaling td to the same value (e.g. both 496 or 498), the "problem" in Chrome and Safari is solved, however in Firefox the right side border is than blank. Because the right-side border can't "fit" in anymore. img and td must be at least 2px more narrow than table.uitbetaling for the right-border be visible in Firefox.
Is there any way to solve this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
将您的代码分割成最简单的元素，并在每个浏览器上测试它们。当您发现差异时，您可以使用不同的浏览器检测方法来巧妙地更改每个实例的代码。话虽如此……如果你不想彻底发疯，CSS 会比编程中的任何东西都更能做到这一点，如果可以的话，让像素消失。
segment your code into its simplest elements and test them on each browser. When you find the differences you can use different methods of browser detection to subtly alter the code for each instance. With that said... if you do not want to go stark raving mad, and CSS will do that more then anything in programming let the pixel go if you can.
为了安全起见，我通常以这种方式打开表格：
它是“旧”HTML，但至少它强制浏览器的一致性，然后我根据需要应用 CSS。
To be safe, I usually open a table in this way:
<table cellspacing="0" cellpadding="0">It is "old" HTML, but at least it forces coherency along browsers, and then I apply CSS as needed.
我检查了 Opera 11、Google Chrome 7.0.517.44 和 FireFox 3.6.12，发现您的网站设计没有任何差异。
I'd checked with Opera 11, Google Chrome 7.0.517.44 and FireFox 3.6.12 have seen no difference with your site design.
您声明了 DTD (DOCTYPE) 吗？
阅读此内容：
http://msdn.microsoft.com/en-us/library/ bb250395.aspx
看起来浏览器有不同的方式来显示边框，但是 DOCTYPE 声明（位于 html 文档的顶部）迫使它们遵守实际标准，至少在 css box 方面模型。
注意：我总是使用 xhtml 过渡 DTD 来使我的文档尽可能兼容...
祝你好运！
Did you declare the DTD (DOCTYPE)?
Read this:
http://msdn.microsoft.com/en-us/library/bb250395.aspx
It looks that browsers have different ways to display the borders, but the DOCTYPE declaration (which goes at the top of the html document) force them to comply with the actual standards, at least in regard of css box model.
Note: I always use the xhtml transitional DTD to make my document as much compatible as possible...
Good luck!
尝试：
Try:
最好的做法是始终在 css 中设置
table{border-collapse:collapse;}，然后使用cell-padding="0"和cell-spacing无论如何，在 html 中添加 ="0"。Its good practice to always set
table{border-collapse:collapse;}in the css, and then usecell-padding="0"andcell-spacing="0"in the html anyway.现在，您应该使用 HTML5 文档类型，如果您遇到有关将边框添加到元素宽度的问题，请查找 CSS 样式： box-sizing
border-box -包括边框宽度/高度和填充宽度/高度，或者基本上您设置的宽度包括边框/填充
内容框 - 您在元素上设置的宽度仅是内容区域，这不包括填充或者 borders
还有 padding-box 我不使用，通常上面两个就足够了。
现在有时，我认为 IE8 使用与 Chrome/FF 等不同的框大小，这就是为什么有时会遇到问题。您始终可以调试并检查盒子大小的设置。
注意：如果您没有 DOCTYPE，那么您就处于怪异模式，并且 IE 在框大小/框模型上与 Chrome/FF 截然不同 - 这就是您的问题
Nowadays you should be using the HTML5 doctype, if you're having issues about borders adding themselves to the element's width look up the CSS style: box-sizing
border-box - include border width/height and padding width/height or basically the width you set includes the borders/padding
content-box - the width you set on the element is only the content area, this does not include padding or borders
There is also padding-box which I don't use, usually the above two are enough.
Now sometimes, I think IE8 uses a different box-sizing than Chrome/FF etc, this is why sometimes you have issues. You can always debug and check what the box-sizing is set to.
Note: if you don't have the DOCTYPE then you're in quirks mode, and IE differs WILDLY from Chrome/FF on the box-sizing/box model - and that's your problem right there