Question

我在使用Chrome和IE时遇到了一些小问题。

在Firefox上，我的按钮完全位于我的导航栏中心，但在Chrome＆amp; IE，我的按钮是1像素到高，左边是几个像素。

有人能帮我解决这个问题吗？

以下是网址和代码：http://nonlocalhost.uphero.com/petshopindex.html

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Pet Shop</title>

    <style type="text/css">
        /* Background */
        body {background-color:black;}
        /* Wrapper */
        #wrapper {margin:0 auto;width:700px;}
        /* Navigation Bar */
        #nav_bar {height:95px;}
        #nav_bar ul {position:relative;left:47px;list-style-type:none;border:1px solid red;width:565px;}
        #nav_bar li {position:relative;left:4px;display:inline-block;height:40px;padding-top:19px;}
        #nav_bar a:hover {background-color:#F116BA;}
        #nav_bar a {padding:20px;color:white;text-decoration:none;background-color:#790D9E;}
        /* Content Box */
        #cont_box {background-color:#450768;width:700px;height:500px;border:1px solid white;}
        #cont_box ul {border:1px solid white;position:relative;top:10px;left:220px;width:420px;height:450px;list-style-type:none;}
        #cont_box li {width:200px;position:relative;top:42px;right:13px;display:inline-block;border:1px solid white;height:180px;}
        #cont_box a {color:white;text-decoration:none;position:relative;top:2px;}
        #cont_box a:hover{color:red;}
        /* Side Menu */
        #side_menu {}
        /* Product Name Position */
        #prod01_namepos {left:70px;}
        #prod02_namepos {left:30px;}
        #prod03_namepos {left:50px;}
        #prod04_namepos {left:70px;}

    </style>
</head>

<body>
    <div id="wrapper">
        <div id="nav_bar">
            <ul>
                <li> <a href="#">Home</a> </li>
                <li> <a href="#">Forums</a> </li>
                <li> <a href="#">Shipping Info</a> </li>
                <li> <a href="#">Contact us</a> </li>
                <li> <a href="#">About us</a> </li>
            </ul>
        </div>
        <div id="cont_box">
            <ul>
                <li> <img src="1.png" height="120" width="200" /> <a id ="prod01_namepos" href="#">Whiskas</a> </li>
                <li> <img src="2.png" height="120" width="200" /> <a id ="prod02_namepos" href="#">Whiskas Temptation</a> </li>
                <li> <img src="3.png" height="120" width="200" /> <a id ="prod03_namepos" href="#">Pedigree Adult</a> </li>
                <li> <img src="4.png" height="120" width="200" /> <a id ="prod04_namepos" href="#">Dog Toy</a> </li>
            </ul>
        </div>
    </div>
</body>

</html>

Answer 1

我摆弄了你的CSS，我想我设法获得了你所追求的行为。给这个CSS一个镜头：

现场演示：jsfiddle

/* Navigation Bar */
#nav_bar {
    height:95px;
}

#nav_bar ul {
    list-style-type: none;
    border: 1px solid red;
    width: 565px;
    height: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}

#nav_bar li {
    display:inline-block;
    height:100%;
    padding: 0;
    margin: 0;
}

#nav_bar a:hover {
    background-color:#F116BA;
}

#nav_bar a {
    display:block;
    height: 100%;
    color:white;
    text-decoration:none;
    line-height: 95px;
    padding: 0  1em 0 1em;
    background-color:#790D9E;
}

导航栏按钮在Chrome和IE上移动

1 个答案: