Question

我有一些用CSS设计的html内容并且用JS填充。在某些时候，我有一个div与divs外部链接。根据上下文，可用链接的数量可能会有所不同，因此我希望页脚将其宽度调整为链接数，并在需要时显示水平滚动条。

我找到的技巧是在我的页脚中设置一个宽度为200％的容器。但是，该代码始终在IE8中显示滚动条，当它在Chrome中正常工作时。

您有任何想法或建议，以便滚动条仅在IE中需要时出现吗？我想摆脱容器中300％的宽度，但是移除它会隐藏屏幕外的链接...

以下是我正在使用的代码：

＆＃13;

div#BottomMenu
{
	width : 99%;	
	height: 150px;
	border-top: 4px solid #E5E5E5;	
	overflow-x: auto;	
	overflow-y: hidden;			
	
}
div#MenuContainer
{	
	width: 300%;	
	padding-left:5px;
	padding-right:5px;		
}

a.Item
{	
	float: left;	
	font-size: 18px;
	font-family:Helvetica;		
	font-weight: bold;
	text-decoration: none;	
	text-transform: uppercase;	
	color:white;
	text-align: center;		
	width: 160px;
	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+ */		
    vertical-align:middle;
	margin-top: 15px;
	margin-right: 10px;
	-moz-box-shadow: 3px 3px 5px #535353;
	-webkit-box-shadow: 3px 3px 5px #535353;
	box-shadow: 3px 3px 5px #535353;	    
    border: 1px solid #E5E5E5;
	background-repeat: no-repeat;

}

a.Item:hover
{
	cursor:pointer;
}

＆＃13;

<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>

＆＃13;

Answer 1

overflow-x仅在IE9及更高版本中受支持。

根据此MSDN文章，您可以在IE8中使用-ms-overflow-x作为此属性的同义词：

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

水平滚动条和宽度自动

1 个答案: