【发布时间】：2010-12-03 19:11:40
【问题描述】：
带有百分比的最大宽度似乎在 IE 8 或 Firefox 3 中都不起作用。特定的像素宽度可以正常工作。我错过了什么吗？
我有一个输入表单，我想在它的右侧显示一些解释性文本。但我不希望解释性文本挤压表单。
我以前没有使用过 max-width，但它似乎是一个很好的解决方案。我写了这个简单的 CSS 样式：
div.hint {max-width: 50%; float: right;}
然后我写道：
<div class=hint>... hint text</div>
<form action=xxx method=post>
... etc ...
div.hint 将表单严重压向左侧。
我只用了一些文本而不是表单来尝试这个。 div.hint 占据了大约 95% 的屏幕，只是在左边留了一个小边距，然后其他文本被完全推到它下面。
如果我将最大宽度从百分比更改为固定像素数，它似乎可以工作。但我不想以像素为基础，因为我不知道用户浏览器的尺寸。
尽管我在文档中阅读了这些内容，但百分比不适用于 max-width，还是我遗漏了什么？
针对 Seanmonster 的评论：在这里，我将提供一个简单但完整的网页，说明我认为应该可行但不可行的内容：
<html><title>Max width test</title>
<style>
.form {max-width: 75%; float: left;}
.hint {max-width: 50%; float: right;}
</style>
<div class=hint>
<p>Fourscore and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that
all men are created equal. We are now engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated,
can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting place
for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. Etc.
</div>
<div class=form>
<table>
<tr><th>Label 1 <td>Value 1
<tr><th>Label 2 <td>Value 2
<tr><th>Label 3 <td>Value 3
</table>
</div>
</html>
当我在浏览器中打开此页面时，我得到的不是两列，而是“提示”div 占据了 100% 的宽度，而在其下方，“表单”div 占据了 100% 的宽度。如果我将最大宽度都更改为“宽度：50%”，我会得到两列，如我所料。显然我错过了关于 max-width 应该如何工作的一些信息，但是......我不明白。
【问题讨论】：
-
根据您提供的信息，您的问题应该不存在。也许你可以给我们一个例子的链接，这样我们就可以看到它在野外发生。
-
我在 Mac 和 PC 上打开了 FF3.5.3 中的示例代码，它运行良好。我确实得到了您在 IE 7 中描述的行为，并且没有 8 可供测试。
-
@Emily：在发布之前，我只用 IE 8 尝试了上面的示例。我会相信你的话，它适用于 Firefox。但是我尝试了其他类似的示例，但在 Firefox 中同样失败了，因此显然它们并不能完全避免这里的根本原因。无论如何，我真的想要至少适用于 IE 7、IE 8 和 Firefox 3 的东西，因为它们可能是最流行的浏览器。