Question

我一直在网站上工作，在所有浏览器上测试后，它看起来很好，除了在IE中，联系div和nav在页面周围移动。有人可以告诉我任何可以解决这个问题的代码吗？

提前致谢

以下是IE中存在问题的HTML和CSS

  <div id="menu">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li class="divider"></li>
    <li><a href="aboutus.html"><span>About Us</span></a></li>
    <li class="divider"></li>
    <li><a href="work.html"><span><span>Work</span></span></a></li>
    <li class="divider"></li>
    <li><a href="services.html"><span><span><span>Services</span></span></span></a></li>
    <li class="divider"></li>
    <li><a href="contact.html"><span><span><span><span>Contact</span></span></span></span></a></li>
          </ul>

    <div id="contact">
    <h3>020 8810 5000<br />
     07703 193 868 info@spema.co.uk</h3>
     </div>

     </div>

CSS

     #menu{
     float:right;
     padding:50px 25px 0 50px;
     margin:0px;
     height:15px;
     }
     #menu ul{
     display:block;
     list-style:none;
     margin:0px;
     }
     #menu ul li{
     display:inline;
     padding:0px;
     margin:0px;
     }
     #menu ul li.divider{
     float:left;
     width:1px;
     height:15px;
     background:url(images/menu_divider.gif) no-repeat center;
     padding:0 12px 0 12px;
     }

     #menu ul li a{
     display:block;
     padding:0px;
     margin:0px;
     float:left;
     font-family: 'aleobold', Arial, sans-serif; 
     text-decoration:none;
     color: #FC0;
     font-size:18px;
     line-height:12px;
     }

     #menu ul li a:hover{
     color: #68696C;
     font-family: 'aleobold', Arial, sans-serif; 
     }

     #menu ul li a span {
     display:block;
     padding:0px;
     margin:0px;
     float:left;
     font-family: 'aleobold', Arial, sans-serif; 
     text-decoration:none;
     color: #F0F;
     font-size:18px;
     line-height:12px;
     }

     #menu ul li a span:hover{
     color: #68696C;
     font-family: 'aleobold', Arial, sans-serif; 
     }

     #menu ul li a span span {
     display:block;
     padding:0px;
     margin:0px;
     float:left;
     font-family: 'aleobold', Arial, sans-serif; 
     text-decoration:none;
     color: #6CF;
     font-size:18px;
     line-height:12px;
     }

     #menu ul li a span span:hover{
     color: #68696C;
     font-family: 'aleobold', Arial, sans-serif; 
     }

     #menu ul li a span span span{
     display:block;
     padding:0px;
     margin:0px;
     float:left;
     font-family: 'aleobold', Arial, sans-serif; 
     text-decoration:none;
     color: #6C6;
     font-size:18px;
     line-height:12px;
     }

     #menu ul li a span span span:hover{
     color: #68696C;
     font-family: 'aleobold', Arial, sans-serif; 
     }

     #menu ul li a span span span span {
     display:block;
     padding:0px;
     margin-left:0px;
     float:left;
     font-family: 'aleobold', Arial, sans-serif; 
     text-decoration:none;
     color: #039;
     font-size:18px;
     line-height:12px;
     }

     #menu ul li a span span span span:hover{
     color: #68696C;
     font-family: 'aleobold', Arial, sans-serif; 
     }

     #contact{
     float:right;
     height: 150px;
     width: 225px;
     }

     body
     {
     background:url(images/triangle_background.jpg) repeat;
     background-size: cover;
     background-attachment:fixed;
     font-family: 'aleoregular', Arial, sans-serif;
     padding:0;
     font-size:16px;
     margin:0px auto auto auto;
     color:#68696C;
     }

     h3{
     color:#F7911D;
     font-size:23px;
     font-family: 'aleobold', Arial, sans-serif; 
     text-align: right;
     clear:both;
     }

Answer 1

尝试在#menu声明

中添加宽度

#menu{
    float:right;
    padding:50px 25px 0 50px;
    margin:0px;
    height:15px;
    width:440px;
}

http://jsfiddle.net/ykntfnnx/2/

除非提供div的宽度，否则IE似乎对浮动有点滑稽

div在IE中移动

1 个答案: