html – CSS max-width with percent
发布时间：2020-12-14 16:34:24 所属栏目：资源 来源：网络整理
导读：带有百分比的max-width似乎在IE 8或Firefox 3中都不起作用.特定的像素宽度可以正常工作.我错过了什么吗？ 我有一个输入表单,我想在其右侧显示一些解释性文本.但我不希望解释性文本压缩表格. 我之前没有使用过max-width,但它似乎是一个很好的解决方案.我写了
|
带有百分比的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 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |