Question

我知道这个小提琴不是很好，因为它看起来有点乱，因为我没有包含我的所有代码，但你可以得到一般的想法：

Fiddle

它在FF和Chrome中工作得很好，但在IE8中，主要的文本块和下面的3个div都搞砸了并且重叠了左边的菜单。

是否与position:relative有关，我需要将其包含在某处？

我需要包含什么来阻止div重叠？

是否有人可以检查高级IE中的小提琴，因为我只有8

Answer 1

我已经成功地清理了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;
}

IE8中的Div放置

1 个答案: