CSS：Chrome和Safari似乎“增加”了边框的宽度，而IE，Firefox&歌剧不 [英] CSS: Chrome and Safari seem to 'add' border to width, while IE, Firefox & Opera don't

问题描述

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

关于此页面： HTTP：// WWW [插入点-这里]骟[插入划线-这里] surfen [插入-dot-here] nl / uitbetalingen.html （请注意，我更喜欢此网址不能抓取seo机器人）

如果您查看这个页面在IE，Firefox或者Opera里，一切都很好，但是在Chrome和Safari中，这些表格有点不合时宜（如你可能会清楚地注意到的那样）。

什么似乎是问题？

在我看来，在Chrome和Safari中，总共左边框和右边框（2px）被添加到设置的表格宽度，而在其他浏览器中，边框是考虑宽度的一部分。
$ b （大多数）相关的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; 
 
 $ / code> 




所以基本上我使用了一个table-结构来组织图像，就像这样:(表的类是 uitbetaling ）

 <表> 
< 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 必须至少比小> 2px> table.uitbetaling


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

解决方案

现在您应该使用HTML5文档类型，如果您遇到关于将边框添加到元素宽度的问题，请查看CSS样式：框尺寸

边界框 - 包含边框宽度/高度和填充宽度/高度或基本上设置的宽度包括边框/填充

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

还有一个我不使用的填充框，通常以上两个就足够了。

现在有时候，我认为IE8使用与Chrome / FF等不同的盒子尺寸，这就是为什么有时你有问题。您始终可以调试并检查箱体大小设置为。注意：如果您没有DOCTYPE，那么您就处于怪异模式，而IE在盒子大小/字体大小上与Chrome / FF的WILDLY不同。

盒模型 - 这就是你的问题在那里

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?

解决方案

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

这篇关于CSS：Chrome和Safari似乎“增加”了边框的宽度，而IE，Firefox&歌剧不的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！