IE怪癖模式中的变通方法渲染错误

时间:2010-09-22 14:36:19

标签: html css width css-float internet-explorer-6

我正在尝试将一个简单的HTML / CSS页面用作eBay模板,但它无法在IE中正确呈现。感谢eBay的HTML选择,列表将始终以怪癖模式呈现(在列表的iframe中没有doctype引用)。只有当浏览器窗口比列表要求的更窄(~1000px)时才会出现问题。我已尝试使用各种CSS黑客(IE的盒子模型,双边距等),但我无法弄清楚问题出在哪里,除了IE似乎试图将页面内容呈现为宽度窗口,覆盖定义的宽度(即使他们的div标签定义了最小宽度,背景图像被剪短的方式判断。无论如何,HTML是(我添加了点来打破img和标签,以便这个可以发帖):


    <style type="text/css">
        img {border:none;}
        .head {min-width:1000px; width:auto !important; width:1000px; min-height:100px; text-align:center; padding:0; margin:0px auto; padding-top: 172px; background: #d4e1ea url(xxxx) no-repeat center top;}
        .left {margin-top:20px; padding:0; float:left;}
        .right {width:200px; margin:0px; margin-top:10px; padding:0; float:right;}
        .main {margin-left:189px; margin-top:20px; margin-right:10px; min-width:800px; width:auto !important; width:800px;}
        .frame (width:100%}
        .foot {width:564px; margin-top:20px;}
        .title {height:68px; width:563px; background-image:url(xxxx); padding:0; text-align:center; font-size:22px; text-transform:uppercase; font-weight:bold; font-family:Helvetica,Tahoma,Arial,sans-serif;}
        .mid {min-height:210px; width:563px; background:repeat-x; padding:0; margin-top:15px; margin-bottom:10px; overflow:hidden;}
        .mid-top {height:34px; background:no-repeat; margin:0; margin-bottom:10px;}
        .mid-main {margin-left:15px; overflow:hidden;}
        .mid-main, .mid-main table {font-size:14px;}
        .foot .mid-main {height:450px; margin:0; margin-left:1px; padding-left:15px; padding-top:5px; clear:both; background:url(xxxx) repeat-x;}
        .menu, .img {list-style:none; margin:0; padding:0;}
        .menu li {margin:0 0 10px 0; padding:0;}
        .menu li a {position:relative; display:block;}
        .menu li a img {position:absolute; left:0px;}
        .menu li a:hover img {left:0px;}
        .img li div {width:200px; height:200px; margin-bottom: 20px;}
        .search {min-height:56px; padding-top:41px; padding-left:12px; margin-bottom:20px; background:url(xxxx) no-repeat;}
    </style>
    <div class="head">
        <!-- FLASH OBJECT -->
    </div>
    <div class="left">
        <div class="search"><form action="xxxx" method="get" name="search">
            <input type="name" name="_nkw" id="eb-srch" length="10" value="Search..." />
            <input type="submit" value="Search" name="submit" />
        </form></div>
        <ul class="menu" id="ldca-menu">
            <li><.a href="xxx"><.img src="xxxx" /></a></li>
            <li><.a href="xxx"><.img src="xxxx" /></a></li>
            <li><.a href="xxx"><.img src="xxxx" /></a></li>
        </ul>
    </div>
    <div class="main">
        <div class="right"><ul class="img">
            <li><.a href="xxxx"><.img src="xxxx" width="200" height="178" alt="image" /></a></li>
            <li><.a href="xxxx"><.img src="xxxx" width="200" height="178" alt="image" /></a></li>
            <li><.a href="xxxx"><.img src="xxxx" width="200" height="178" alt="image" /></a></li>
        </ul></div>
        <div class="frame">
            <div class="title">Thing to Sell</div>
            <div class="desc mid">
                <div class="mid-top"><!-- CSS BG image --> </div>
                <div class="mid-main">Description....blah..</div>
            </div>
            <div class="specs mid">
                <div class="mid-top"><!-- CSS BG image --> </div>
                <div class="mid-main"><!-- more description --></div>
            </div>
        </div>
        <div class="foot">
            <ul id="ldft-menu" class="menu">
                <li><div onclick="x" class="x"><.img alt="x" src="xxxx" /></div></li><!-- JS is to change img sprite to hightlight tab -->
                <li><div onclick="x" class="x"><.img alt="x" src="xxxx" /></div></li><!-- JS is to change img sprite to hightlight tab -->
                <li><div onclick="x" class="x"><.img alt="x" src="xxxx" /></div></li><!-- JS is to change img sprite to hightlight tab -->
            </ul>
            <div class="mid-main">
                <div id="ldft-1">
                    <h3>Tab Title</h3>
                    <p>Content</p>
                </div>
                <div id="ldft-2">
                    <h3>Tab Title</h3>
                    <p>Content</p>
                </div>
                <div id="ldft-3">
                    <h3>Tab Title</h3>
                    <p>Content</p>
                </div>
            </div>
        </div>
    </div>

1 个答案:

答案 0 :(得分:1)

尝试添加

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

在你的标题中。这将强制IE标准兼容渲染。