html – CSS max-width with percent

前端之家收集整理的这篇文章主要介绍了html – CSS max-width with percent前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
带有百分比的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

猜你在找的HTML相关文章