我需要一个带边框的 div 来环绕任意大小的固定宽度内容(这意味着我不知道固定宽度是多少，它会随着页面的不同而变化)。
下面的 html 实现了我在 IE 6 中所期望的，也就是说，如果您将浏览器窗口的大小缩小到小于内容的宽度(在本例中为固定宽度 <p> ，但它可能是任何固定宽度的内容)，带边框的 div 在内容的右侧边缘停止收缩。然而，在 IE 7(和 FF)中，边框继续缩小以保持在浏览器窗口的宽度内，向后移动并显示内容。
有没有办法让div随浏览器窗口缩小和增长，但宽度永远不会小于内容？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Border Test</title>
</head>
<body>
<div style="border: 1px #0000FF solid;padding:3px;">
<p style="width:700px;">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent varius mi a leo
ultrices consequat. Nam id venenatis ligula.
Suspendisse et faucibus eros. Donec quis
augue eu nunc cursus blandit vel vel odio.
Suspendisse rutrum aliquet massa, eu ultricies
elit laoreet a. Curabitur feugiat cursus.
</p>
</div>
</body>
</html>
更新:我在 IE 8 中做了一些探索，并且 display:table在<div>样式声明将它修复在那里。
<div style="border: 1px #0000FF solid;padding:3px;display:table;">
有没有办法模拟display:table在 IE 7 中？
最佳答案
将“overflow:auto”添加到父 div，所以...
<div id="parentDiv" style="border: 1px #0000FF solid;padding:3px;overflow:auto;"> should make it work.
这样，您就拥有了 CSS 可以提供的最佳解决方案。现在，对于你的高级用户，使用 jquery 的这一点根据其子 div 为父 div 提供适当的宽度。
请注意，我为您的 div 设置了一个类，以便我可以轻松定位它们。
<body>
<div class="parentDiv" style="border: 1px #0000FF solid;padding:3px;overflow:auto;">
<p style="width:700px;">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent varius mi a leo
ultrices consequat. Nam id venenatis ligula.
Suspendisse et faucibus eros. Donec quis
augue eu nunc cursus blandit vel vel odio.
Suspendisse rutrum aliquet massa, eu ultricies
elit laoreet a. Curabitur feugiat cursus.
</p>
</div>
<script type="text/javascript">
$(function(){
$('.parentDiv').each(function(){
var newWidth = $(this).find('p:first').width();
$(this).width(newWidth);
});
});
</script>
</body>
关于html - 扩展 div 以适应 IE 6 和 7 中的固定宽度内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1955725/