IE中的div宽度问题 [英] Div width problem in IE
问题描述
在发布之前，我通读了几个与此类似的问题，但没有找到适合我的解决方案。
我在我的网站上有一个页面，不适合我用于其他每个页面的模板，因为为该页面生成的信息表非常广泛。为了使表格显示我使用了 overflow-x：visible 。结果正是我想在除IE以外的每个浏览器中。以下是我设置div标签的方式：
< body>
< div id =header>< / div>
< div id =container>
< div id =left_nav>< / div>
< div id =contentstyle =overflow-x：visible>< / div>
< / div>
< / body>
...以及重要的CSS如下所示：
#content {
background-color：#CCCCCC;
bottom：0px;
font-family：Arial，Helvetica，sans-serif;
font-size：medium;
font-weight：normal;
left：270px;
min-width：505px; / *应该是490px * /
overflow：auto;
overflow-x：hidden;
padding-bottom：20px;
padding-left：20px;
padding-right：5px;
padding-top：10px;
位置：绝对;
right：0px;
top：125px;
}
#header {
background-color：＃5DB259;
font-family：Arial，Helvetica，sans-serif;
font-size：xx-large;
font-weight：normal;
height：125px;
left：0px;
min-width：800px;
位置：绝对;
text-align：center;
宽度：100％;
top：0px;
}
#leftnav {
background-color：＃999999;
bottom：0px;
font-family：Arial，Helvetica，sans-serif;
font-size：large;
font-weight：bold;
left：0px;
溢出：auto;
padding：20px;
位置：绝对;
top：125px;
width：230px;
}
问题是IE在给我两个x轴滚动条时浏览器窗口宽度减小。结果是我的标题div宽度保持在指定的最小宽度800px，而从我的内容溢出仍然可见，从而在我的页面的右上角导致一个大的空白矩形。 我在这里错过了什么？ 解决方案
兼容模式使得页面能够做我想要的，但不幸的是，兼容模式也搞乱了我的JavaScript。我最终走上了低谷，只是用一些PHP破解了我的动态网页模板，使它成为我想要的东西。 @＃$％IE！
I read through several questions similar to this one before posting, but did not find a solution that worked for me.
I have one page in my site that does not fit the template I use for every other page because the table of info generated for that page is so wide. To make the table show I used overflow-x:visible. The result is exactly what I wanted in every browser except IE. Here is how my div tags are set up:
<body>
<div id="header"></div>
<div id="container">
<div id="left_nav"></div>
<div id="content" style="overflow-x:visible"></div>
</div>
</body>
... and the CSS that matters looks like this:
#content {
background-color: #CCCCCC;
bottom:0px;
font-family: Arial,Helvetica,sans-serif;
font-size:medium;
font-weight:normal;
left:270px;
min-width:505px;/* should be 490px*/
overflow:auto;
overflow-x:hidden;
padding-bottom:20px;
padding-left:20px;
padding-right:5px;
padding-top:10px;
position:absolute;
right:0px;
top:125px;
}
#header {
background-color: #5DB259;
font-family: Arial,Helvetica,sans-serif;
font-size: xx-large;
font-weight: normal;
height: 125px;
left: 0px;
min-width:800px;
position: absolute;
text-align: center;
width: 100%;
top: 0px;
}
#leftnav {
background-color: #999999;
bottom: 0px;
font-family: Arial,Helvetica,sans-serif;
font-size: large;
font-weight: bold;
left: 0px;
overflow: auto;
padding: 20px;
position: absolute;
top: 125px;
width: 230px;
}
The problem is that IE is not giving me two x-axis scroll bars when the browser window width is reduced. The result is that my header div width stays at the specified minimum width of 800px while the overflow from my content is still visible, thus causing a big blank rectangle in the upper right hand corner of my page. What am I missing here?
After over a day of messing with this I found that IE8 Compatibility Mode made the page do what I wanted, but unfortunately Compatibility Mode also messed up my JavaScript. I ended up taking the low road and just hacked up my Dynamic Web Template with some PHP to make it do what I wanted. @#$% IE!
这篇关于IE中的div宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
