使用 CSS 无法正确呈现 DIV 和 TABLE 宽度答案

【问题标题】：DIV and TABLE widths not rendering properly using CSS使用 CSS 无法正确呈现 DIV 和 TABLE 宽度
【发布时间】：2009-07-29 22:07:58
【问题描述】：

有了这个 html：

<div class="sectionheading">User Information</div>  
<table id="UserInputTable" class="xInputTable">

...还有这个 CSS：

.sectionheading{width:100%; font-size:20px; font-weight:bold; background-color:#28BA87; color:white; text-align:center; border-style:solid; border-width:thin; border-color:Black; border-collapse:separate; overflow:hidden}

.xInputTable {text-align:left; 
                  vertical-align:middle; 
                  margin: 0px 0px 0px 0px;
                  padding: 0px 0px 0px 0px;
                  border-collapse:separate;
                  overflow:hidden}
table.xInputTable {width:100%; border: solid thin red; border-top-style:none;}

在 IE 和 Firefox 中，DIV 最终呈现宽 2 个像素（左边框完美对齐，右边框偏离两个像素）。使用 IE web 开发工具栏，两个元素的宽度都是 100%。在 Firebug 中，它们的宽度为 950px 和 948px。这是计算出来的 CSS（来自 IE 开发者工具栏）：

DIV

BORDER-LEFT-WIDTH: thin;
BACKGROUND-REPEAT: repeat;
BORDER-RIGHT: thin solid black;
WIDTH: 100%;
FONT-SIZE: 300;
MARGIN-RIGHT: 0px;
OVERFLOW: hidden;
BORDER-LEFT: thin solid black;
BORDER-COLLAPSE: separate;
PADDING-TOP: 0px;
VERTICAL-ALIGN: middle;
DISPLAY: block;
BORDER-BOTTOM: thin solid black;
BORDER-TOP: thin solid black;
BACKGROUND: #28ba87;
BORDER-BOTTOM-WIDTH: thin;
FONT-FAMILY: Arial;
BORDER-TOP-WIDTH: thin;
LINE-HEIGHT: 1.5;
BACKGROUND-COLOR: #28ba87;
PADDING-RIGHT: 0px;
BORDER-RIGHT-WIDTH: thin;
PADDING-LEFT: 0px;
TEXT-ALIGN: center;
COLOR: white;
FONT-WEIGHT: 700;
MARGIN: 0px;
PADDING-BOTTOM: 0px;

表格

BORDER-LEFT-WIDTH: thin;
BACKGROUND-REPEAT: repeat;
BORDER-RIGHT: thin solid red;
WIDTH: 100%;
FONT-SIZE: 180;
MARGIN-RIGHT: 0px;
OVERFLOW: hidden;
HEIGHT: auto;
BORDER-LEFT: thin solid red;
BORDER-COLLAPSE: separate;
PADDING-TOP: 0px;
VERTICAL-ALIGN: middle;
DISPLAY: block;
BORDER-BOTTOM: thin solid red;
BACKGROUND: white;
BORDER-BOTTOM-WIDTH: thin;
FONT-FAMILY: Arial;
BORDER-TOP-WIDTH: thin;
BACKGROUND-COLOR: white;
LINE-HEIGHT: normal;
PADDING-RIGHT: 0px;
BORDER-RIGHT-WIDTH: thin;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 0px;
COLOR: #222;
TEXT-ALIGN: left;
MARGIN: 0px;
PADDING-BOTTOM: 0px;

知道我在这里缺少什么概念吗？

【问题讨论】：

...整合 CSS 的概念...
大声笑....太真实了...但公平地说，这个烂摊子是我的头撞到墙上的几个小时尝试一切的结果。似乎下面的答案已经显示了如何让它工作，但除此之外，如果我知道 CSS 是否有一个基本前提，我不会一开始就遇到这个问题。地点。

标签： asp.net css firebug

【解决方案1】：

在这里猜测一下，但默认情况下，表格的 cellpadding 或 cellspacing（不记得是哪一个）默认设置为 2px，除非您设置了 border-collapse: collapse;。

这不影响表格本身，但td的表格内。

如果我的猜测是正确的，以下任何一个都应该有效：

在表格的css中设置border-collapse: collapse;
放置“cellpadding="0" cellspacing="0"in the`标签
添加新的 CSS 声明 table.xInputTable td { padding:0; margin:0; }

【讨论】：

【解决方案2】：

可能是每个（左和右）边框的 2 个像素，在计算宽度时未将其考虑在内。

【讨论】：

我认为您可能是正确的.....但是，您到底是什么意思？解决方案似乎是 not 在应用于 DIV 的样式中设置 width: 100%，但在应用于表格的样式中 do 将其设置为 width:100%。 ..所有边距和填充设置为0，这会正确呈现。那么这里发生了什么没有意义的事情呢？
这肯定没有意义。这一切都取决于不同浏览器对 CSS boxmodel 的实现。（IE 与 FF 与 Webkit）。我放弃了制作像素完美的网站，这不值得。更多信息：brainjar.com/css/positioning/default.asp

【解决方案3】：

尽量不要专门在 div 上设置宽度（也可以在表格上）。我相信它们默认为 100%，但在设置时计算结果会略有不同。

【讨论】：

【解决方案4】：

pb 是正确的。

当您将“边框”应用于表格时，它将调整宽度以适应边框。除了宽度之外，DIV 还会添加边框（大多数具有指定宽度的元素也是如此，表格是特殊的）。

Hurix 是正确的，将宽度 100% 添加到 div 是没有意义的，因为它是一个块元素，默认情况下会占据父元素的整个宽度，所以你可以把它取下来，它会自动调整大小即使将边框添加到其宽度，也要留在父级内部。但是，如果您希望表格为全宽，则表格应获得宽度：100%。

【讨论】：

【解决方案5】：

边框的作用类似于填充，因此您将 2px 添加到您的宽度 => 100% + 2px

还可以考虑使用 meyers reset.css 确保您在跳入之前处于水平地面。 http://meyerweb.com/eric/tools/css/reset/

而且你对全大写的事情有点疯狂。

【讨论】：

好的，但是我为 div 和 table 添加了相同的边框，但一个比另一个宽。这只是另一个必须记住的 CSS 怪癖，还是存在涵盖这种情况的基本基本规则？

【解决方案6】：

好吧，在我看来，此时我会一直回滚到 html。认真使用 FireBug，一次只添加一个 CSS 属性，以确保它不会对布局产生负面影响。

不幸的是，CSS 的本质是它充满了例外和继承需要考虑的事情。从一个 reset.css 开始，也许将所有不同的主要元素设置为不同的背景颜色（因为它不会像边框一样改变大小）可以帮助您查看元素实际驻留的位置。

【讨论】：

【解决方案7】：

跟进 kmiyashiro 和 pb 我想补充一点，如果您将表格包装在一个样式为“width:100%; border: solid thin red; border-top-style:none;”的 div 中，并将“table.xInputTable”上的样式更改为“width: 100%”，那么一切都应该符合起来。

【讨论】：