带有百分比的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％,只是左边有一个小的边距,然后另一个文本被完全推到它下面.
如果我将最大宽度从百分比更改为固定数量的像素,它似乎工作.但我不想以像素为基础,因为我不知道用户浏览器的尺寸.
尽管我在文档中读到了,或者我遗漏了什么东西,百分比是否与最大宽度无关？
回应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应该如何工作的东西,但是……我不明白.
解决方法
在多种情况下,IE8上的max-width是错误的.这是一个众所周知的问题.
你可以在这里找到一篇文章. http://edskes.net/ie8overflowandexpandingboxbugs.htm
你需要三件事来触发这个bug – maxwidth,scrollbars和float
