2013-10-28 49 views
0

我知道這小提琴是不是很大,因爲它看起來有點混亂,因爲我沒有將我所有的代碼,但你可以得到的總體思路:股利放置在關閉IE8

Fiddle

它在FF和Chrome中運行良好,但在IE8中,主要的文本塊和下面的3個div都搞亂了,重疊在左邊的菜單上。

position:relative有什麼關係,我需要包含在某個地方嗎?

我需要包括一些東西,以阻止研磨過度的div?

是否有任何人可以檢查小提琴更高的IE瀏覽器,因爲我只有8

+0

它得到弄糟在Chrome對我來說也是如此。這是因爲'maintext'和'product'都是'float:right'。最好爲所有主文本和產品創建一個包含塊,並使用「display:inline-block」而不是浮動塊。應該適用於所有現代瀏覽器和IE8 + – andyb

+0

乾杯安迪,我會放棄! – SaturnsEye

+0

@andyb我嘗試刪除我的浮動並將內聯塊添加到圍繞主文本和產品的容器div,但我似乎無法正常工作。有沒有可能編輯我的小提琴,以便我可以看到它是如何完成的? – SaturnsEye

回答

0

我已經設法清理HTML和CSS一點,但也有你應該考慮向前移動前進行更多的變化。我肯定會考慮刪除CSS中的重複項,有許多重複的屬性可以組合成一個屬性爲多個選擇器。您還應該確保您正在編寫有效的HTML,因爲這也會導致跨瀏覽器呈現問題。

See demo或下面的示例代碼。

HTML

<div class="allinfo"> 
    <div class="menu"> 
     <div class="menutop">WATCHGUARD SHOP MENU</div> 
     <ul class="menuoptions"> 
      <li><span class="redtext">WatchGuard Home</span> 

      </li> 
      <li>XTM Series Firewalls</li> 
      <li>XCS Series Firewalls</li> 
      <li>SSL VPN Encryption</li> 
      <li>Security In Education</li> 
      <li>Wireless Access Points</li> 
      <li>FREE Quotation</li> 
     </ul> 
     <div class="tradein">TRADE IN</div> 
     <div class="tradeininfo"> 
      <strong>Trade Up</strong> 
      <p>Trade in an earlier generation WatchGuard appliance or any approved non-WatchGuard appliance-based security solution, and trade up to eligible new WatchGuard solutions at 25% off the standard purchase price.</p> 
     </div> 
     <div class="whitepapers">WHITEPAPERS</div> 
     <div class="whitepapersinfo"> 
      <ul> 
       <li>Take Back Control</li> 
       <li>Data Loss Prevention</li> 
       <li>Securing the Virtual World</li> 
      </ul> 
     </div> 
    </div> 
    <div class="maintext"> 
     <h5>Welcome To The WatchGuard Homepage</h5> 

     <br/> 
     <p>WatchGuard builds affordable, all-in-one network and content security solutions to provide defense in depth for corporate content, networks and the businesses they power.</p> 
     <p>WatchGuard's award-winning extensible threat management (XTM) network security solutions combine firewall, VPN and security services to protect networks from spam, viruses, malware and intrusions.</p> 
     <p>The new Extensible Content Security (XCS) appliances offer content security across e-mail and web combined with data loss prevention for complete content protection.</p> 
     <p>WatchGuard extensible solutions scale to offer right-sized security for small businesses up to enterprises with 10,000+ employees.</p> 
     <p>Since our founding in 1996, more than 600,000 WatchGuard signature red security appliances have been deployed worldwide. Today more than 15,000 dedicated partners back our products in 120 countries.</p> 
     <div class="products"> 
      <div class="product"> <span>WatchGuard SSL/VPN</span> 

       <br/> 
       <br/> 
       <br/> 
       <img src="images/watchguard-tb-ssl.jpg" width="199" /> 
       <br/> 
       <br/> 
       <p>Remote connectivity. Secure remote access that just works.</p> 
      </div> 
      <div class="product"> <span>WatchGuard XCS</span> 

       <br/> 
       <br/> 
       <br/> 
       <img src="images/watchguard-tb-xcs.jpg" width="117" height="72" /> 
       <br/> 
       <br/> 
       <p>Content security. Defense in-depth email security and web security.</p> 
      </div> 
      <div class="product"> <span>WatchGuard XTM</span> 

       <br/> 
       <br/> 
       <br/> 
       <img src="images/watchguard-tb-xtm.jpg" width="122" height="72" /> 
       <br/> 
       <br/> 
       <p>Multi-function firewalls. Incredible speed. Unbelievable value.</p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

.redtext { 
    color:#DF0005; 
} 
.banner { 
    position:relative; 
    top:10px; 
} 
.menu, .maintext { 
    display:table-cell; 
    padding:10px; 
} 
.maintext { 
    height:500px; 
    font-size:smaller; 
    font-weight:normal; 
    vertical-align:top; 
    margin-left:240px; 
} 
.maintext h5 { 
    font-weight:lighter; 
} 
.menu { 
    position:relative; 
    width:235px; 
} 
.menutop { 
    height:30px; 
    background-color:rgb(221, 221, 221); 
    color:#666; 
    line-height:30px; 
    font-weight:bold; 
    border-style:solid; 
    border-width:1px; 
    border-color:#CCC; 
    text-indent:10px; 
    font-size:smaller; 
} 
.menuoptions { 
    color:#666; 
    line-height:30px; 
    font-weight:bold; 
    list-style:none; 
    padding: 0; 
    font-size:smaller; 
} 
.menuoptions li { 
    border-bottom:solid 1px #ccc; 
    padding-left:10px; 
} 
.tradein { 
    background-color:rgb(221, 221, 221); 
    color:#666; 
    line-height:30px; 
    font-weight:bold; 
    border-style:solid; 
    border-width:1px; 
    border-color:#CCC; 
    text-indent:10px; 
    font-size:smaller; 
} 
.tradeininfo { 
    color:#333; 
    border-style:solid; 
    border-width:1px; 
    border-color:#CCC; 
    padding:10px; 
    font-size:smaller; 
} 
.whitepapers { 
    background-color:rgb(221, 221, 221); 
    color:#666; 
    line-height:30px; 
    font-weight:bold; 
    border-style:solid; 
    border-width:1px; 
    border-color:#CCC; 
    text-indent:10px; 
    font-size:smaller; 
} 
.whitepapersinfo { 
    color:#666; 
    border-style:solid; 
    border-width:1px; 
    border-color:#CCC; 
    line-height:30px; 
    font-weight:bold; 
    font-size:smaller; 
} 
.whitepapersinfo li:not(:last-child) { 
    border-bottom:solid 1px #ccc; 
} 

.product { 
    position:relative; 
    width:205px; 
    height:205px; 
    border-style:solid; 
    border-width:1px; 
    border-color:#CCC; 
    margin:5px; 
    padding:10px; 
    text-align:center; 
    display:inline-block; 
    vertical-align:top; 
} 
.product span { 
    position:relative; 
    font-size:18px; 
    margin:0 auto; 
    color:#333333; 
} 
.product p { 
    text-align:left; 
    font-size:smaller; 
    color:#333333; 
}