Question

带有百分比的max-width似乎在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％，而在“form”div占用100％的宽度之下。如果我将最大宽度更改为“宽度：50％”，我会得到两列，如我所料。显然我错过了一些关于max-width应该如何工作的东西，但是......我不明白。

Answer 1

最大宽度在FF3和IE8中的百分比完全正常。但是，百分比基于父宽度。不是周围的孩子。

Answer 2

IE8上的max-width在多种情况下都是错误的。这是一个众所周知的问题。

你可以在这里找到一篇文章。 http://edskes.net/ie8overflowandexpandingboxbugs.htm

你需要三件事来触发这个bug - maxwidth，scrollbars和float

Answer 3

如果您要将div.hint浮动并形成左侧并且两者的最大宽度均为50％，则它们不应相互挤压。

<div>
  <div class="form" style="float:left; max-width:50%">
    <form></form>
  </div>
  <div class="hint" style="float:left; max-width:50%">
  </div>
</div>

CSS max-width with percent

3 个答案: