0
我知道這小提琴是不是很大,因爲它看起來有點混亂,因爲我沒有將我所有的代碼,但你可以得到的總體思路:股利放置在關閉IE8
它在FF和Chrome中運行良好,但在IE8中,主要的文本塊和下面的3個div都搞亂了,重疊在左邊的菜單上。
與position:relative
有什麼關係,我需要包含在某個地方嗎?
我需要包括一些東西,以阻止研磨過度的div?
是否有任何人可以檢查小提琴更高的IE瀏覽器,因爲我只有8
我知道這小提琴是不是很大,因爲它看起來有點混亂,因爲我沒有將我所有的代碼,但你可以得到的總體思路:股利放置在關閉IE8
它在FF和Chrome中運行良好,但在IE8中,主要的文本塊和下面的3個div都搞亂了,重疊在左邊的菜單上。
與position:relative
有什麼關係,我需要包含在某個地方嗎?
我需要包括一些東西,以阻止研磨過度的div?
是否有任何人可以檢查小提琴更高的IE瀏覽器,因爲我只有8
我已經設法清理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;
}
它得到弄糟在Chrome對我來說也是如此。這是因爲'maintext'和'product'都是'float:right'。最好爲所有主文本和產品創建一個包含塊,並使用「display:inline-block」而不是浮動塊。應該適用於所有現代瀏覽器和IE8 + – andyb
乾杯安迪,我會放棄! – SaturnsEye
@andyb我嘗試刪除我的浮動並將內聯塊添加到圍繞主文本和產品的容器div,但我似乎無法正常工作。有沒有可能編輯我的小提琴,以便我可以看到它是如何完成的? – SaturnsEye