Question

如果有人可以在IE6中正确显示，我会非常感激。从我所看到的，添加浮动：左边锚点应该照顾这个。这是代码：

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CSS Tabs</title>

    <style>
    * { margin: 0; padding: 0; }
    #page-wrap { width: 960px; margin: 100px auto; }
    h1 { font: 36px Georgia, Serif; margin: 20px 0; }
    .group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    p { margin: 0 0 10px 0; }

    .tabs { list-style: none; }
    .tabs li { display: inline; }
    .tabs li a { color: black; float: left; display: block; padding: 4px 10px; margin-left: -1px; position: relative; left: 1px; background: white; text-decoration: none; }
    .tabs li a:hover { background: #ccc; }

    .w3c { min-height: 250px; position: relative; width: 100%; }
    .w3c > div { display: inline; }
    .w3c > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: black; background: white; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white; }
    .w3c > div:not(:target) > a { border-bottom: 0; background: -moz-linear-gradient(top, white, #eee); }   
    .w3c > div:target > a { background: white; }    
    .w3c > div > div { background: white; z-index: -2; left: 0; top: 30px; bottom: 0; right: 0; padding: 20px; border: 1px solid #ccc; }    
    .w3c > div:not(:target) > div { position: absolute }
    .w3c > div:target > div { position: absolute; z-index: -1; }

    </style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google-analytics.com/ga.js" async="async"></script>
<script type="text/javascript" src="http://s3.buysellads.com/r/s_3469a2a501a9e18091036aa0c89f9dcb.js?v=1341187200000" async="async" id="_bsap_js_3469a2a501a9e18091036aa0c89f9dcb"></script>


</head>
<body>
<form id="form1" runat="server">
<div id="page-wrap">
    <div style="width: 420px; float: left;">
        <h1>
            Example Six</h1>
        <p>
            Grade: A</p>
        <p>
            This is the winner so far. It is infinitely expandable (no selectors specific to
            panels) and the markup is pretty clean. Possible issues: cross-browser line height
            issues possibly not making perfect layout, links are placed right above each div
            instead of a in central list at the top.</p>
        <div class="w3c">
            <div id="tab16">
                <a href="#tab16">Tab 16</a>
                <div>
                    One might well argue, that...</div>
            </div>
            <div id="tab17">
                <a href="#tab17">Tab 17</a>
                <div>
                    ... 30 lines of CSS is rather a lot, and...</div>
            </div>
            <div id="tab18">
                <a href="#tab18">Tab 18</a>
                <div>
                    ... that 2 should have been enough, but...</div>
            </div>
        </div>
    </div>
</div>
</form>
</body>
</html>

这是jsfiddle：http://jsfiddle.net/kfarmer/hhBh7/

我复制的示例也包含了IE的这一部分 - 但它没有任何效果，因为它不适用于任何给定的HTML：

<!--[if IE]>
<style type="text/css">
    .box { display: block; }
    #box { overflow: hidden;position: relative; }
    b { position: absolute; top: 0px; right: 0px; width:1px; height: 251px; overflow: hidden; text-indent: -9999px; }
</style>
<![endif]-->

如果此页面上的示例6显示了我的内容：http://css-tricks.com/examples/CSSTabs/#tab18

感谢任何建议。

问候。

CSS HTML：无法在IE6中渲染水平制表符

0 个答案: