Question

我正在尝试创建一个带背景的简单搜索栏，并在侧面创建一个“高级”href。它在Chrome，Mozilla中正确呈现，但是在IE 8中，href在下面一行显示为一个单独的块？

我的HTML代码：

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8" />
<title>FireFox HomePage</title>
<!--[if lt IE 9]>
    <script src="../HTML5Shiv/dist/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="MainPage1.css" />
</head>

<body>
<header>
    <div class="wrapper">
        <a href="#"><img src="../../IMG/FireFox.png" alt="FireFox Logo"     title="FireFox Home" /></a>     
        <span id="usernav"><a href="#">Logout</a><a href="#">My Profile</span>  
    </div>

    <form action="" method="Search">
        <p>
            <input type="search" />
            <input type="submit" value="Search"/>
            <a href="#">Advanced</a>
        </p>                    
    </form>         
</header>

</body>
</html>

我的CSS代码：

        /* CSS Reset */
    * { margin: 0; padding: 0; }

    html { height: 101%; font-family: “Helvetica Neue”, Arial, Helvetica, sans-serif; background: #fff; }
    body { font-size: 62.5%; font-family: Helvetica, Arial, sans-serif; line-height: 10%; }
    img { border: 0;}

    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }

    /* Main CSS */

    header { width: 1000px; margin: 0 auto; clear: both;}
    .wrapper { width: 1000px; margin: 0 auto; margin-top: 10px;}

    #usernav { position: relative;  margin-top: 20 px; font-size: 12px;}
    #usernav a { color: #444; text-shadow: 0px 1px 1px #ddd; text-decoration: none;  float: right; padding: 8px;}   
    #usernav a:hover { text-decoration: underline; }

    form{background-color: #eee; border-bottom: 1px solid #dadada; height: 50px;}


    /** @group clearfix **/
    .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
    .clearfix { display: inline-block; }
    html[xmlns] .clearfix { display: block; }
    * html .clearfix { height: 1%; }

Answer 1

好的，我在解决了一些问题后解决了这个问题。似乎删除了

<span id="usernav"><a href="#">Logout</a><a href="#">My Profile</span>

从div内部直接放置在标题内解决了IE漏洞。不确定为什么，欢迎提出建议。我无法发布图片，因为我没有超过10个声誉点:(

href出现在IE中与我的表单不同的一行

1 个答案: