Dmi*_*kov 17 css firefox zoom word-wrap css-float
给出以下HTML.它显示两列:#left,#right.两者都是固定宽度并具有1px边框.宽度和边框等于上部容器的大小:#wrap.
当我通过按Ctrl +缩小Firefox 3.5.2时 - 列被包装(演示).
怎么预防这个？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
div {float:left}
#wrap {width:960px}
#left, #right {width:478px;border:1px solid}
</style>
</head>
<body>
<div id="wrap">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</body>
</html>
Яeg*_*ght 13
尝试切换到不同的盒子模型,如下所示:
#left, #right
{
width:480px;
border:1px solid;
box-sizing: border-box;
/* and for older/other browsers: */
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box
}
小智 8
德米特里,
当缩放后浏览器计算div的新宽度时,它不会减少与单个960px成比例的两个478px + 4px的边框元素.所以你最终得到这个:
你原来的风格:
#wrap equals 960px wide
#left & #right, plus border equals 960px wide
一切都很合适.
缩小缩放(ctrl-)
#wrap equals (approx.) 872px wide.
#left, #right, plus border eqauls 876px wide.
(left and right reduce to approx 436px each, plus 4 px of border)
#wrap的内容太宽了.要查看和测量它,只需将背景颜色应用于#wrap.
要修复,请从#wrap中删除宽度.因为它是浮动的,它会闪烁以适应内容.但是,您应该为浮动元素应用宽度,而div {float:left}将它应用于#wrap.
删除样式div {float:left}并将float:left添加到#left,#right.
#left, #right {float:left;width:478px;border:1px solid}
如果你想让#wrap居中,那么你需要再次为它声明一个宽度并添加margin:0 auto;,在这种情况下你会再次出现这个问题[编辑:或者你可以,如克里斯指出的那样,将宽度设置为100%].因此,只需重新计算#left,#right的宽度,以便它们适合.
我的理解是,在父元素和子元素的宽度之间留一点喘息的空间,无论如何都可以避免这种问题.
我不确定我完全理解你的情况。减小缩放实际上应该是缩小。你是说当你缩小时，列会环绕吗？
您应该在 CSS 中使用以下代码浮动这些 div：
#container {width: 960px}
#left {float: left}
#right {float: right}
如果这不起作用，您可以尝试通过调整宽度来在列之间留出一个小空间，以补偿一些小的浏览器差异。
编辑（忽略上面）：
鉴于您向我提供了更多信息，我需要告诉您，浏览器在调整大小时会进行舍入，而拥有这些精确的像素完美大小并不是最明智的做法。
相反，您可以让一个 div 具有绝对宽度，而另一个 div 具有自动宽度，如下所示：
#container {width: 960px;}
#left {width: 478px;}
#right {width: auto;}
这将使浏览器在#wrap div 中占用尽可能多的#right 空间。请务必设置换行的宽度，否则它将占据窗口的 100%。
我希望这有帮助！
编辑：
右侧非常接近您的固定宽度，因为您已经定义了容器的宽度，所以它只是容器宽度减去左侧的宽度。这只是为了确保调整窗口大小时不会出现差异。
我知道它不会占用整个空间区域，但是，随着内容的添加，它的最大宽度是容器左侧的宽度。您想应用背景吗？在这种情况下，将右侧背景设置为容器背景，然后将左侧设置为左侧背景（确保它覆盖一半）。
我希望我有所帮助。