Question

使用这个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;}

DIV最终在IE和Firefox中渲染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;

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

Answer 1

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

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

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

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

Answer 2

可能是每个（左和右）边框的2个像素，在计算宽度时不会考虑这些像素。

Answer 3

尝试不在div上专门设置宽度（也可能是表格）。它们默认为100％，但在设定时会略有不同，我相信。

Answer 4

pb是正确的。

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

Hurix是正确的，没有必要为div添加100％的宽度，因为它是一个块元素，默认情况下将占用父级的全宽，因此你可以将其取下并自动调整大小即使边框添加到其宽度，仍留在父级内部。但是，如果您希望表格为全宽，则表格应为宽度：100％。

Answer 5

Borders就像填充一样，所以你在你的width =＆gt;上加2px 100％+ 2px

另外考虑使用meyers reset.css确保您在跳入之前的平台上。 http://meyerweb.com/eric/tools/css/reset/

此外，你对全部大佬有点疯狂。

Answer 6

好的，在我看来，在这一点上，我会一直回到html。虔诚地使用FireBug，一次只添加一个CSS属性，以确保它对布局没有负面影响。

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

Answer 7

跟进kmiyashiro和pb我想补充一点，如果你将表格包裹在风格为“width:100%; border: solid thin red; border-top-style:none;”的div中，并将“table.xInputTable”上的样式更改为“{{1} “那么一切都应排好。

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

DIV

表

7 个答案: