寻求 CSS 浏览器兼容性信息以使用 left 和 right 设置宽度
这是一个困扰我一年的问题。 根本问题是如何设置元素相对于其父元素的大小，以便它从每个边缘插入 N 个像素？ 设置宽度会很好，但是您不知道父级的宽度，并且您希望元素随窗口调整大小。 （您不想使用百分比，因为您需要特定数量的像素。）
编辑 我还需要防止内容（或缺乏内容）拉伸或收缩这两个元素。 我得到的第一个答案是在父级上使用填充，这会很好用。 我希望父级的宽度与浏览器客户端区域的高度完全相同，并且子级无法推动它并获得滚动条。 /编辑
我尝试使用 {top:Npx;left:Npx;bottom:Npx;right:Npx;} 解决这个问题，但它只适用于某些浏览器。
我可能会用 jquery 编写一些 javascript 来修复每个页面大小调整时的所有元素，但我对该解决方案并不满意。 （如果我想要顶部偏移 10 像素，但底部仅偏移 5 像素怎么办？这会变得很复杂。）
我想知道的是如何以跨浏览器的方式解决这个问题，或者一些允许轻松解决的浏览器列表CSS 解决方案。 也许有人有一个技巧可以让这件事变得简单。
Here's a question that's been haunting me for a year now. The root question is how do I set the size of an element relative to its parent so that it is inset by N pixels from every edge? Setting the width would be nice, but you don't know the width of the parent, and you want the elements to resize with the window. (You don't want to use percents because you need a specific number of pixels.)
Edit
I also need to prevent the content (or lack of content) from stretching or shrinking both elements. First answer I got was to use padding on the parent, which would work great. I want the parent to be exactly 25% wide, and exactly the same height as the browser client area, without the child being able to push it and get a scroll bar.
/Edit
I tried solving this problem using {top:Npx;left:Npx;bottom:Npx;right:Npx;} but it only works in certain browsers.
I could potentially write some javascript with jquery to fix all elements with every page resize, but I'm not real happy with that solution. (What if I want the top offset by 10px but the bottom only 5px? It gets complicated.)
What I'd like to know is either how to solve this in a cross-browser way, or some list of browsers which allow the easy CSS solution. Maybe someone out there has a trick that makes this easy.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
CSS Box 模型可能会为您提供见解，但是我的猜测是，仅使用 CSS 无法实现像素完美的布局。
如果我理解正确的话，您希望父级宽度为 25%，并且高度等于浏览器显示区域的高度。 然后，您希望子项的宽度为 25% - 2n 像素，高度为 100%-2n 像素，子项周围有 n 像素。 当前的 CSS 规范不支持这些类型的计算（尽管 IE5、IE6 和 IE7 有非标准 对 CSS 表达式的支持 和 IE8 正在放弃支持 用于 IE8 标准模式下的 CSS 表达式）。
您可以强制父级占浏览器区域的 100% 且宽度为 25%，但是您不能用此方法将子级的高度拉伸到像素完美......
但是会出现水平滚动条。 此外，如果内容被挤压，父背景将不会延伸超过 100%。 这可能是您在问题本身中提出的填充示例。
您可以通过图像和其他 div 来实现您所寻求的幻觉，但我不相信仅靠 CSS 就可以在满足高度要求的情况下实现像素完美。
The The CSS Box model might provide insight for you, but my guess is that you're not going to achieve pixel-perfect layout with CSS alone.
If I understand correctly, you want the parent to be 25% wide and exactly the height of the browser display area. Then you want the child to be 25% - 2n pixels wide and 100%-2n pixels in height with n pixels surrounding the child. No current CSS specification includes support these types of calculations (although IE5, IE6, and IE7 have non-standard support for CSS expressions and IE8 is dropping support for CSS expressions in IE8-standards mode).
You can force the parent to 100% of the browser area and 25% wide, but you cannot stretch the child's height to pixel perfection with this...
...but a horizontal scrollbar will appear. Also, if the content is squeezed, the parent background will not extend past 100%. This is perhaps the padding example you presented in the question itself.
You can achieve the illusion that you're seeking through images and additional divs, but CSS alone, I don't believe, can achieve pixel perfection with that height requirement in place.
如果您只关心水平间距，那么您可以通过给父元素填充来使父块元素内的所有子块元素“插入”一定量。 您可以通过给定元素边距来在父块元素中“插入”单个子块元素。 如果您使用后一种方法，您可能需要在父元素上设置边框或轻微填充，以防止边距折叠。
如果您也关心垂直间距，那么您需要使用定位。 父元素需要定位； 如果您不想将其移动到任何地方，请使用
position:relative并且不必设置top或left； 它将保留在原处。 然后对子元素使用绝对定位，并相对于子元素设置top、right、bottom和left父元素的边缘。例如：
如果您想避免内容扩大元素的宽度，那么您应该使用
overflow属性，例如overflow: auto。If you are only concerned with horizontal spacing, then you can make all child block elements within a parent block element "inset" by a certain amount by giving the parent element padding. You can make a single child block element within a parent block element "inset" by giving the element margins. If you use the latter approach, you may need to set a border or slight padding on the parent element to prevent margin collapsing.
If you are concerned with vertical spacing as well, then you need to use positioning. The parent element needs to be positioned; if you don't want to move it anywhere, then use
position: relativeand don't bother settingtoporleft; it will remain where it is. Then you use absolute positioning on the child element, and settop,right,bottomandleftrelative to the edges of the parent element.For example:
If you want to avoid content from expanding the width of an element, then you should use the
overflowproperty, for example,overflow: auto.只需对父元素应用一些填充，而对子元素不应用宽度。 假设它们都是
display:block，那应该可以正常工作。Simply apply some padding to the parent element, and no width on the child element. Assuming they're both
display:block, that should work fine.或者反过来：设置子元素的边距。
Floatutorial 是此类内容的绝佳资源。
Or go the other way around: set the
marginof the child-element.Floatutorial is a great resource for stuff like this.
试试这个：
它的所有边都应该有一个 Npx 空间，拉伸以填充父元素。
编辑：
当然，在父级上，你也可以使用
Try this:
It should have an Npx space on all sides, stretching to fill the parent element.
EDIT:
Of course, on the parent, you could also use