0

Chrome と IE で小さな問題が発生しています。

Firefox では、ボタンはナビゲーション バーの中央に完全に配置されていますが、Chrome と IE では、ボタンの高さが 1 ピクセル、左に数ピクセルあります。

誰かがこれを理解するのを手伝ってくれますか?

URL とコードは次のとおりです: 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>
4

1 に答える 1

0

私はあなたの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;
}
于 2012-08-16T06:47:04.173 に答える