寻求CSS浏览器兼容性信息以使用左右设置宽度
这是一个困扰我一年的问题。根本问题是如何设置元素相对于其父元素的大小，以便从每个边缘插入N个像素？设置宽度会很好，但是我们不知道父级的宽度，并且我们希望元素随窗口调整大小。 (我们不想使用百分比，因为我们需要特定数量的像素。)
编辑
我还需要防止内容(或者内容不足)拉伸或者收缩这两个元素。我得到的第一个答案是在父级上使用填充，效果很好。我希望父级的宽度恰好为25％，高度与浏览器客户区域的高度完全相同，而子级却不能将其推入并获得滚动条。
/编辑
我尝试使用{top：Npx; left：Npx; bottom：Npx; right：Npx;}解决此问题，但它仅在某些浏览器中有效。
我可能会用jquery编写一些javascript，以在每次调整页面大小时修复所有元素，但是我对这种解决方案并不满意。 (如果我想让顶部偏移10像素而底部仅偏移5像素怎么办？它变得很复杂。)
我想知道的是如何以跨浏览器的方式解决此问题，或者是一些允许使用简单CSS解决方案的浏览器。也许有人在外面有个窍门，使这变得容易。
解决方案
只需对父元素应用一些填充，而对子元素则不设置宽度。假设它们都是display：block，那应该可以正常工作。
或者反过来：设置子元素的" margin"。
Floatutorial是此类资源的绝佳资源。
试试这个：
.parent {padding:Npx; display:block;}
.child {width:100%; display:block;}
它的所有侧面都应该有一个Npx空间，可以延伸以填充父元素。
编辑：
当然，在父母身上，我们也可以使用
{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}
如果仅关注水平间距，则可以通过给父元素填充以一定的数量来使父块元素内的所有子块元素"插入"一定数量。我们可以通过给定元素边距来在父块元素"插入"中制作单个子块元素。如果使用后一种方法，则可能需要在父元素上设置边框或者略微填充以防止边距折叠。
如果我们还担心垂直间距，则需要使用定位。父元素需要定位；如果我们不想将其移动到任何地方，请使用" position：relative"，而不必设置" top"或者" left"；它会保持原样。然后，在子元素上使用绝对定位，并相对于父元素的边缘设置" top"，" right"，" bottom"和" left"。
例如：
#outer {
width: 10em;
height: 10em;
background: red;
position: relative;
}
#inner {
background: white;
position: absolute;
top: 1em;
left: 1em;
right: 1em;
bottom: 1em;
}
如果要避免内容扩展元素的宽度，则应使用" overflow"属性，例如" overflow：auto"。
CSS Box模型可能为我们提供洞察力，但是我的猜测是，仅靠CSS并不能实现像素完美的布局。
如果我理解正确，则我们希望父级宽度为25％，恰好是浏览器显示区域的高度。然后，我们希望子像素的宽度为2％像素的25％，高度为100％-2n像素，子对象周围为n像素。当前的CSS规范均不支持这些类型的计算(尽管IE5，IE6和IE7对CSS表达式具有非标准支持，而IE8放弃了对IE8标准模式下CSS表达式的支持)。
我们可以将父对象强制设置为浏览器区域的100％，宽度为25％，但是我们不能以此将孩子的高度扩展到像素完美。
<style type="text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<p>content ... content ... content</p>
</div>
</div>
...但是会出现一个水平滚动条。同样，如果压缩内容，则父级背景不会超过100％。这也许是我们在问题本身中提出的填充示例。
我们可以通过图像和其他div来实现我们所追求的错觉，但是我不相信仅CSS就能满足这一高度要求。
