水平滚动条和宽度自动

问题描述：

我有一些HTML样式的CSS和填充JS。在某些时候，我有一个包含外部链接的div的页脚。根据上下文，可用链接的数量可能会有所不同，所以我希望页脚将宽度调整为链接数量，并在需要时显示水平滚动条。水平滚动条和宽度自动

我发现的诀窍是在我的页脚中设置一个宽度为200％的容器。但是，当它在Chrome中正常工作时，该代码总是在IE8中显示滚动条。

你有什么想法或建议，所以滚动条只出现在IE需要时？我想摆脱在容器中的300％的宽度，但在取出它隐藏在屏幕外的链接...

以下是一段代码我使用：

div#BottomMenu 
 
{ 
 
\t width : 99%; \t 
 
\t height: 150px; 
 
\t border-top: 4px solid #E5E5E5; \t 
 
\t overflow-x: auto; \t 
 
\t overflow-y: hidden; \t \t \t 
 
\t 
 
} 
 
div#MenuContainer 
 
{ \t 
 
\t width: 300%; \t 
 
\t padding-left:5px; 
 
\t padding-right:5px; \t \t 
 
} 
 

 
a.Item 
 
{ \t 
 
\t float: left; \t 
 
\t font-size: 18px; 
 
\t font-family:Helvetica; \t \t 
 
\t font-weight: bold; 
 
\t text-decoration: none; \t 
 
\t text-transform: uppercase; \t 
 
\t color:white; 
 
\t text-align: center; \t \t 
 
\t width: 160px; 
 
\t height: 120px; 
 
    white-space: pre-wrap; /* css-3 */  
 
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 
 
    white-space: -pre-wrap; /* Opera 4-6 */  
 
    white-space: -o-pre-wrap; /* Opera 7 */  
 
    word-wrap: break-word; /* Internet Explorer 5.5+ */ \t \t 
 
    vertical-align:middle; 
 
\t margin-top: 15px; 
 
\t margin-right: 10px; 
 
\t -moz-box-shadow: 3px 3px 5px #535353; 
 
\t -webkit-box-shadow: 3px 3px 5px #535353; 
 
\t box-shadow: 3px 3px 5px #535353; \t  
 
    border: 1px solid #E5E5E5; 
 
\t background-repeat: no-repeat; 
 

 
} 
 

 
a.Item:hover 
 
{ 
 
\t cursor:pointer; 
 
}

<div id="footer"> 
 
    <div id="MenuContainer"> 
 
    <a class="Item" id="link1" image:url(./images/Link1.png); background-color: transparent;></a> 
 
    <a class="Item" id="link2" image:url(./images/Link1.png); background-color: transparent;></a> 
 
    <a class="Item" id="link3" image:url(./images/Link1.png); background-color: transparent;></a>  
 
    <a class="Item" id="link4" image:url(./images/Link1.png); background-color: transparent;></a>  
 
    <a class="Item" id="link5" image:url(./images/Link1.png); background-color: transparent;></a>  
 
    <a class="Item" id="link6" image:url(./images/Link1.png); background-color: transparent;></a>  
 
    </div> 
 
</div>

答

overflow-x只支持在IE9及更高版本。

根据这个MSDN文章，你可以在IE8使用-ms-overflow-x作为这个属性的代名词：

http://msdn.microsoft.com/en-gb/library/ie/ms530826%28v=vs.85%29.aspx

水平滚动条和宽度自动

相关推荐