一般容器 - IE8水平滚动条问题

我跑成以下问题：
如何使一个一般的容器（HTML + CSS;不需要JavaScript）
，其垂直contrained（它有一个固定的外部高度），因此它可能有一个垂直滚动条
但（根据需要由容器的内容），可以水平生长，所以它永远不会有水平滚动条一般容器 - IE8水平滚动条问题

它在IE8，FF，Chrome浏览器正常工作（不IE7或更早）

解决方案首先是微不足道的
但我不能在IE8去掉水平滚动条：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<body> 
<div style="display: table;" class="container-div-1"> 
    <div style="display: table-cell;" class="container-div-2"> 
     <div style="overflow-y: scroll; height: 19em;" class="container-div-3"> 
      <div style="width: 30em; height: 30em; background-color: red;" class="example-content"></div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

在这个例子中

，我们需要一个19em高的容器，可以水平增长，因为需要由内容（在这种情况下，“例如-cotent”格）
请不要建议修改‘示例内容’分区，因为它只是一个样本内容（任何内容可以在那里）

这个问题是这样的问题的概括： IE8 horizontal scrollbar problem

来源

2011-04-05 slobo

重要的是：容器不应该水平扩展，只要内容需要（这就是为什么外部CSS表在那里） – slobo 2011-04-05 15:34:11

我发布了一个后续问题：http://stackoverflow.com/questions/ 5558592/general-container-ie8-horizontal-scrollbar-problem-revisited – slobo 2011-04-05 21:14:10

浮动可能会得到r你正在寻找的东西。点击这里，查看我的例子：
http://jsbin.com/ivegi4/4/edit

我带走了的div，因为我不认为他们是必要的，但我不会看到一个问题将它们放回如果你绝对需要他们。

来源

2011-04-05 15:20:49 RussellUresti

很好，它确实有效...但还有一件事：如果我想'overflow-y：auto'而不是'overflow-y：scroll'，FF和Chrome显示水平滚动条（IE8不）！我怎样才能摆脱这个水平滚动条？ http://jsfiddle.net/slobo/EY8kj/5/ – slobo 2011-04-05 20:03:53

我注意到这个解决方案的一些东西：在IE8中，垂直滚动条不在框中（这适用于'position：absolute'和'display：inline-block '解决方案也是） – slobo 2011-04-06 00:13:34

滚动条出现在盒子外面是防止水平滚动条出现的原因。如果它进入内部，内容的宽度将被剪裁并显示一个水平滚动条。 – RussellUresti 2011-04-06 14:44:40

在container-div-3 div上设置position: absolute。这将导致div收缩包装任何内部，并在IE8中正常工作。

来源

2011-04-05 15:22:34 Snorbuckle

我在container-div-2 div上添加了'position：absolute'。没有改变。我错过了什么？ – slobo 2011-04-05 15:46:40

哎呀，对不起，应该是3不是2！现在就试试。 :) – Snorbuckle 2011-04-05 15:50:06

不错，它真的有效......但还有一件事：如果我想'overflow-y：auto'而不是'overflow-y：scroll'，FF和Chrome会显示水平滚动条（IE8没有）！我怎样才能摆脱这个水平滚动条？ http://jsfiddle.net/slobo/EY8kj/7/ – slobo 2011-04-05 20:08:43

一般容器 - IE8水平滚动条问题

回答

相关问题