Question

我遇到了跨浏览器兼容性问题，主要是我的导航栏，我已经检查了导航栏的所有CSS，并且找不到任何可能导致导航器在Firefox上变得混乱的东西，我目前正在使用Safari，它看起来很好，

这是Safari中的导航：

这是Firefox中的导航：

这是我的CSS：

#header_wrapper {
    width:100%;
}
#pre_header {
    width:100%;
    height:30px;
    background-color:#202020;
    border-bottom:1px solid black;
}
#pre_header_content {
    margin:0 auto;
    max-width:1140px;
}

#main_header {
    width:100%;
    height:64px;
    background-color:#343434;
    transition: ease 500ms;

}

#main_header_content {
    margin:0 auto;
    max-width:1140px;
    min-width:1140px;
    position:relative;
}

#main_header_logo {
    height: 64px;  
    width:300px;   
    display:inline-block;
}


.logo {
    vertical-align: middle;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

/* NAVIGATION LINKS */

#main_header_links_wrapper {
    display:inline-block;
    float:right;
}

#main_header_links ul {
    list-style-type: none;

    line-height:64px;
}

#main_header_links li {
    display: inline;
    font-family: 'Roboto', sans-serif;  
    font-size:18px;
    font-weight: 400;
    color:#fff;
    cursor:pointer;
}

.header_link_icon {
    padding-left:5px;
}

.header_link_padding {
    padding-left:25px;
}

#main_header_links a {
    text-decoration: none;
}
#main_header_links a:hover {
    text-decoration: underline;
    color:#fff;
}

#main_header_link_categories {
    font-family: 'Roboto', sans-serif;  
    font-size:18px;
    font-weight: 300;
    color:#fff;
    cursor:pointer;
    display: inline-block;
    min-height:64px;
}

.header_link_icon_rotate {
    padding-left:5px;
    transition: 100ms;
}

#main_header_link_categories:hover .header_link_icon_rotate {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    margin-left:2px;
    transition: 100ms;
}

#slide {
    right:0;
    position:absolute;
    background-color:#fff;
 -webkit-box-shadow: 0px 5px 10px -1px rgba(112,112,112,1);
-moz-box-shadow: 0px 5px 10px -1px rgba(112,112,112,1);
box-shadow: 0px 5px 10px -1px rgba(112,112,112,1);
display:none;
z-index: 999;
width:320px;

}



#touch {position: absolute; opacity: 0; height: 0px;}    


#touch:hover + #slide {
    display: block;

}

#slide:hover {
    display:block;
}

.slide_wrapper { 
/* margin:10px; */
z-index: 999;
}
.slide_wrapper ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.slide_wrapper a {
    text-decoration: none;
}


#search_bar {
    display: inline-block;
}


#category_image {
    float:left;
    margin-left:5px;
}

#nav_categories tr {
    width:100%;
}

#nav_category_image {
    width:40px;
    max-width:40px;
    min-width:40px;
}

#nav_category_link {
    width:270px;
}

#nav_categories {
    font-family: 'Roboto', sans-serif;  
    font-size:14px;
    font-weight: 300;
    color:#000000;
    cursor:pointer;
    line-height: 25px;
    background-color:#fff;
    padding:4px 15px 4px 15px;
}

#nav_categories:hover { 
    background-color:#004d6e;
    color:#fff;
    font-size:15px;
}

#nav_categories img {
    max-width: 20px;
    max-height: 20px;
}

#nav_categories:hover img {
    -webkit-filter: invert(100%) !important;
    filter: invert(100%) !important;
    display: inline;
}

#category_arrow  {
    float:right;
    display:none;
    margin-top:7px;
    margin-bottom:7px;
}


/* SEARCH */

#search_bar {
    margin-left:40px;
}


#search_bar input {
    width:320px;
    height:26px;
    border-radius: 3px;
    border: none;
    padding-left:10px;
    border:1px solid black;
}

#search_bar button {
    width:70px;
    height:26px;
    border-radius: 3px;
    margin-left:5px;
    border: none;
    padding: 0px;
    border:1px solid #ccc;
    background-color:#343434;
    color:#fff;
    font-family: 'Roboto', sans-serif;  
    font-size:12px;
    font-weight: 400;

}

#search_bar button:hover {
    background-color:#202020;
    cursor:pointer;
}



/* PRE HEADER */


#pre_header_content_left {
    float:left;
}
#pre_header_content_left ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height:30px;
}
#pre_header_content_left li {
    display: inline;
    border-right: 1px solid #292929;
    border-left: 1px solid #292929;
    padding:6px 15px 5px 15px;
    margin-right:-2px;
    font-size:14px;
}



#pre_header_content_left a {
    text-decoration:none;
    color:#fff;

}
#pre_header_content_left li:hover {
    background-color:#4e4e4e;

}

#pre_header_content_right {
    float:right;
}
#pre_header_content_right ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height:30px;
}
#pre_header_content_right li {
    display: inline;
    border-right: 1px solid #292929;
    border-left: 1px solid #292929;
    padding:6px 15px 5px 15px;
    margin-right:-2px;
    font-size:14px;
}
#pre_header_content_right a {
    text-decoration:none;
    color:#fff;
}

/*TEST */

#pre_header_content_right li:hover {
    background-color:#4e4e4e;
}

.navigation_icons {
    margin-right:5px;
}

HTML：

<div id="header_wrapper">
    <div id="pre_header">
        <div id="pre_header_content">

            <div id="pre_header_content_left">
                <ul>

                    <a href="#.php"><li><img class="navigation_icons" src="images/navigation/bookmark.png" width="12"></img>Stores</li></a>
                    <a id="hide" href="#.php"><li><img class="navigation_icons" src="images/navigation/plus.png" width="12"></img>Submit a code</li></a>
                    <a id="hide" href="#.php"><li><img class="navigation_icons" src="images/navigation/voucher.png" width="12"></img>Advertise</li></a>
                    <a href="#.php"><li><img class="navigation_icons" src="images/navigation/speaker.png" width="12"></img>Contact Us</li></a>

                </ul>  
            </div>

            <div id="pre_header_content_right">
                <ul>


                    <?php 

                        if(!isset($_SESSION)) 
                        { 
                            session_start(); 
                        }                       

                        if(isset($_SESSION['username'])) {
                            echo '
                            <a href="memberpage.php"><li><img class="navigation_icons" src="images/navigation/account.png" width="12"></img>' . ucfirst($_SESSION['username']) . '</li></a>';

                            $loggedinname = $_SESSION['username'];

                            $check = mysqli_query($user_conn, "SELECT priv FROM members WHERE username = '$loggedinname'");
                            while ($row= $check->fetch_assoc()) {
                                if ($row['priv'] == 1) {
                                    $admin = TRUE; 
                                }
                                else {
                                    $admin = FALSE;
                                }
                            }

                            if($admin == TRUE) {
                                echo '
                                    <a href="admin.php"><li><img class="navigation_icons" src="images/navigation/edit.png" width="12"></img>Admin</li></a> ';
                            } 

                            echo '
                            <a href="logout.php"><li><img class="navigation_icons" src="images/navigation/login.png" width="12"></img>Logout</li></a> ';

                        }

                        else {

                            echo '
                            <a href="login.php"><li><img class="navigation_icons" src="images/navigation/login.png" width="12"></img>Login</li></a>
                            <a href="register.php"><li><img class="navigation_icons" src="images/navigation/thumb.png" width="12"></img>Sign up</li></a>
                            ';
                        }
                    ?>



                </ul>
            </div>

        </div>
    </div>


    <div id="main_header">
        <div id="main_header_content">

            <div id="main_header_logo">
                <a href="index.php"><span class="helper"></span><img class="logo" src="images/navigation/logo.png" width="250"></img></a>
            </div>


            <form action="search_results.php" method="POST" id="search_bar">
                <input type="text" class="search_term" name="search" placeholder="Search for a store..." maxlength="20" autocomplete="off">
                <button type="submit" class="search_button" value="search">Search</button>
            </form>

            <div id="main_header_links_wrapper">
                <div id="main_header_links">
                    <ul>
                        <label for="touch"><div id="main_header_link_categories"><a href="user_all_categories.php"><li class="main_header_link_categories">Categories</li><img class="header_link_icon_rotate" src="images/navigation/arrow_right.png" height="12"></img></a></div></label>
                        <a href="/pages/newest.php"><li class="header_link_padding">Newest</li><img class="header_link_icon" src="images/navigation/arrow_right.png" height="12"></img></a>
                        <a href="/pages/stores.php"><li class="header_link_padding">Stores</li><img class="header_link_icon" src="images/navigation/arrow_right.png" height="12"></img></a>
                    </ul>
                </div>
            </div>

            <input type="checkbox" id="touch"> 
            <div id="slide">
                <div class="slide_wrapper">
                <ul id="categories">

                    <?php 

                    $result=mysqli_query($conn, "SELECT count(*) as total from categories");
                    $data=mysqli_fetch_assoc($result);

                    if ($data['total'] == 0) {
                        echo "No categories added.";
                    } else {


                        $res = $conn->query("SELECT category FROM categories ORDER BY category ASC");
                        while($row=$res->fetch_array())
                        {
                            echo 
                            '<a href="category_page.php?category=' . $row['category'] . '">' .
                                '<table id="nav_categories">' .
                                    '<tr>' .
                                        '<li>' .
                                            '<td id="nav_category_image">' . '<img src="images/categories/' . $row['category'] . '.png">' . '</td>' . 
                                            '<td id="nav_category_link">' . ucfirst($row['category']) . '<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10">' . '</td>' .
                                        '</li>' .
                                    '</tr>' . 
                                '</table>' . 
                            '</a>';
                        }
                    }

                    ?>

                    </ul>

                </div>

            </div>

        </div>
    </div>
</div>

来自Firefox的完整页面来源：

<html>
    <head>
        <title>Home Page</title>
        <link rel="stylesheet" type="text/css" href="css/template.css">
        <link rel="stylesheet" type="text/css" href="css/admin.css">
        <link rel="stylesheet" type="text/css" href="css/navigation.css">
        <link rel="stylesheet" type="text/css" href="css/footer.css">
        <link rel="stylesheet" type="text/css" href="css/dropdown.css">
        <link rel="stylesheet" type="text/css" href="css/coupon.css">
        <link rel="stylesheet" type="text/css" href="css/tile.css">
        <link rel="stylesheet" type="text/css" href="css/storepage.css">
        <link rel="stylesheet" type="text/css" href="css/login.css">
        <link rel="stylesheet" type="text/css" href="css/coupons_wrapper.css">
        <link rel="stylesheet" type="text/css" href="css/normalize.css">

        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script src="js/footer.js"></script>
    </head>
    <body onload="document.body.className += ' loaded';">




<div id="header_wrapper">
    <div id="pre_header">
        <div id="pre_header_content">

            <div id="pre_header_content_left">
                <ul>

                    <a href="#.php"><li><img class="navigation_icons" src="images/navigation/bookmark.png" width="12"></img>Stores</li></a>
                    <a id="hide" href="#.php"><li><img class="navigation_icons" src="images/navigation/plus.png" width="12"></img>Submit a code</li></a>
                    <a id="hide" href="#.php"><li><img class="navigation_icons" src="images/navigation/voucher.png" width="12"></img>Advertise</li></a>
                    <a href="#.php"><li><img class="navigation_icons" src="images/navigation/speaker.png" width="12"></img>Contact Us</li></a>

                </ul>  
            </div>

            <div id="pre_header_content_right">
                <ul>



                            <a href="login.php"><li><img class="navigation_icons" src="images/navigation/login.png" width="12"></img>Login</li></a>
                            <a href="register.php"><li><img class="navigation_icons" src="images/navigation/thumb.png" width="12"></img>Sign up</li></a>



                </ul>
            </div>

        </div>
    </div>


    <div id="main_header">
        <div id="main_header_content">

            <div id="main_header_logo">
                <a href="index.php"><span class="helper"></span><img class="logo" src="images/navigation/logo.png" width="250"></img></a>
            </div>


            <form action="search_results.php" method="POST" id="search_bar">
                <input type="text" class="search_term" name="search" placeholder="Search for a store..." maxlength="20" autocomplete="off">
                <button type="submit" class="search_button" value="search">Search</button>
            </form>

            <div id="main_header_links_wrapper">
                <div id="main_header_links">
                    <ul>
                        <label for="touch"><div id="main_header_link_categories"><a href="user_all_categories.php"><li class="main_header_link_categories">Categories</li><img class="header_link_icon_rotate" src="images/navigation/arrow_right.png" height="12"></img></a></div></label>
                        <a href="/pages/newest.php"><li class="header_link_padding">Newest</li><img class="header_link_icon" src="images/navigation/arrow_right.png" height="12"></img></a>
                        <a href="/pages/stores.php"><li class="header_link_padding">Stores</li><img class="header_link_icon" src="images/navigation/arrow_right.png" height="12"></img></a>
                    </ul>
                </div>
            </div>

            <input type="checkbox" id="touch"> 
            <div id="slide">
                <div class="slide_wrapper">
                <ul id="categories">

                    <a href="category_page.php?category=hi"><table id="nav_categories"><tr><li><td id="nav_category_image"><img src="images/categories/hi.png"></td><td id="nav_category_link">Hi<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td></li></tr></table></a><a href="category_page.php?category=high"><table id="nav_categories"><tr><li><td id="nav_category_image"><img src="images/categories/high.png"></td><td id="nav_category_link">High<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td></li></tr></table></a><a href="category_page.php?category=non"><table id="nav_categories"><tr><li><td id="nav_category_image"><img src="images/categories/non.png"></td><td id="nav_category_link">Non<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td></li></tr></table></a><a href="category_page.php?category=test"><table id="nav_categories"><tr><li><td id="nav_category_image"><img src="images/categories/test.png"></td><td id="nav_category_link">Test<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td></li></tr></table></a><a href="category_page.php?category=travel"><table id="nav_categories"><tr><li><td id="nav_category_image"><img src="images/categories/travel.png"></td><td id="nav_category_link">Travel<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td></li></tr></table></a><a href="category_page.php?category=World"><table id="nav_categories"><tr><li><td id="nav_category_image"><img src="images/categories/World.png"></td><td id="nav_category_link">World<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td></li></tr></table></a>
                    </ul>

                </div>

            </div>

        </div>
    </div>
</div>  
    <div id="wrapper">









<div id="tile_wrapper">


  <div id="tile_image_wrapper">

    <a href="storepage.php?name=Th asx sdaidj jsdiasdjo jsd">

        <div id="tile_inner_wrapper"><img src="images/stores/Th asx sdaidj jsdiasdjo jsd.png"></div>
    </a>

</div>



<div id="tile_image_wrapper">

    <a href="storepage.php?name=rolex">

        <div id="tile_inner_wrapper"><img src="images/stores/rolex.png"></div>
    </a>

</div>



<div id="tile_image_wrapper">

    <a href="storepage.php?name=zzzzzzzzzzzzzzzz">

        <div id="tile_inner_wrapper"><img src="images/stores/zzzzzzzzzzzzzzzz.png"></div>
    </a>

</div>



<div id="tile_image_wrapper">

    <a href="storepage.php?name=hi">

        <div id="tile_inner_wrapper"><img src="images/stores/hi.png"></div>
    </a>

</div>



<div id="tile_image_wrapper">

    <a href="storepage.php?name=E">

        <div id="tile_inner_wrapper"><img src="images/stores/E.png"></div>
    </a>

</div>



<div id="tile_image_wrapper">

    <a href="storepage.php?name=e">

        <div id="tile_inner_wrapper"><img src="images/stores/e.png"></div>
    </a>

</div>



<div id="tile_image_wrapper">

    <a href="storepage.php?name=hi">

        <div id="tile_inner_wrapper"><img src="images/stores/hi.png"></div>
    </a>

</div>



<div id="tile_image_wrapper">

    <a href="storepage.php?name=X">

        <div id="tile_inner_wrapper"><img src="images/stores/X.png"></div>
    </a>

</div>



<div id="tile_image_wrapper">

    <a href="storepage.php?name=W">

        <div id="tile_inner_wrapper"><img src="images/stores/W.png"></div>
    </a>

</div>



<div id="tile_image_wrapper">

    <a href="storepage.php?name=bt">

        <div id="tile_inner_wrapper"><img src="images/stores/bt.png"></div>
    </a>

</div>



<div id="tile_image_wrapper">

    <a href="storepage.php?name=bitcoin">

        <div id="tile_inner_wrapper"><img src="images/stores/bitcoin.png"></div>
    </a>

</div>



<div id="tile_image_wrapper">

    <a href="storepage.php?name=E">

        <div id="tile_inner_wrapper"><img src="images/stores/E.png"></div>
    </a>

</div>



<div id="tile_image_wrapper">

    <a href="storepage.php?name=d">

        <div id="tile_inner_wrapper"><img src="images/stores/d.png"></div>
    </a>

</div>



<div id="tile_image_wrapper">

    <a href="storepage.php?name=roman">

        <div id="tile_inner_wrapper"><img src="images/stores/roman.png"></div>
    </a>

</div>



<div id="tile_image_wrapper">

    <a href="storepage.php?name=british gas ">

        <div id="tile_inner_wrapper"><img src="images/stores/british gas .png"></div>
    </a>

</div>



<div id="tile_image_wrapper">

    <a href="storepage.php?name=J">

        <div id="tile_inner_wrapper"><img src="images/stores/J.png"></div>
    </a>

</div>




  <span class="stretch"></span>
</div>


<br>



<h1>Random Coupons</h1>



<div id="coupon">

<div id="coupon_wrapper"><div id="coupon_left"><div id="coupon_image"><img src="images/stores/bt.png"></div><div id="coupon_expire_wrapper">n/a</div></div><div id="coupon_right"><div id="design_coupon_title"><a href="http://www.d">D</a>DEAL</div></div></div><br>
</div><div id="coupon">

<div id="coupon_wrapper"><div id="coupon_left"><div id="coupon_image"><img src="images/stores/british gas .png"></div><div id="coupon_expire_wrapper"><div id="coupon_expire_tag">Expires: </div><div id="coupon_expire_date">22 / Jun / 16</div></div></div><div id="coupon_right"><div id="design_coupon_title"><a href="http://www.sgsg" target="_blank">Best</a></div><div id="coupon_instruction">Copy this code and enter at the checkout</div><div id="coupon_code_wrapper"><div id="coupon_promo_code">SJHBJH</div><a href="http://www.sgsg" target="_blank"><div id="coupon_button">Go to<img src="images/navigation/arrow_right_bl.png" width="13" height="13"></div></a></div></div></div><br>
</div><br>


<h1>All Categories</h1>
<br> 


<a href="category_page.php?category=hi">hi</a><br><a href="category_page.php?category=high">high</a><br><a href="category_page.php?category=non">non</a><br><a href="category_page.php?category=test">test</a><br><a href="category_page.php?category=travel">travel</a><br><a href="category_page.php?category=World">World</a><br>
<a href="admin.php">Admin</a>

<h1>Store Links</h1>



    </div>



<div id="footer"></div>
    </body>
</html>

如果有人介意请给我一些建议或者可以快速浏览一下CSS，我们将不胜感激。再次感谢

Answer 1

您的文字链接正在包装，这就是假设徽标所在的方式。

Vertical-align应设置为徽标的wrapper，以便与内容/ line-height进行互动。

a {white-space:nowrap}第一次治疗，直到你发现为什么字体显示不一样。对{ul}进行padding重置也可以：http://codepen.io/gc-nomade/pen/YWGPvz

＆＃13;

#header_wrapper {
  width: 100%;
}
/*added */
#header_wrapper a {
  white-space: nowrap;
}

/* end added */
#pre_header {
  width: 100%;
  height: 30px;
  background-color: #202020;
  border-bottom: 1px solid black;
}

#pre_header_content {
  margin: 0 auto;
  max-width: 1140px;
}

#main_header {
  width: 100%;
  height: 64px;
  background-color: #343434;
  transition: ease 500ms;
}

#main_header_content {
  margin: 0 auto;
  max-width: 1140px;
  min-width: 1140px;
  position: relative;
}

#main_header_logo {
  height: 64px;
  width: 300px;
  display: inline-block;
  
/*added */
  overflow: hidden;
  vertical-align: middle;
  
/* end added */
}

.logo {}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}


/* NAVIGATION LINKS */

#main_header_links_wrapper {
  display: inline-block;
  float: right;
}

#main_header_links ul {
  list-style-type: none;
/*added */
  padding: 0; 
/* end added */
  line-height: 64px;
}

#main_header_links li {
  display: inline;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  cursor: pointer;
}

.header_link_icon {
  padding-left: 5px;
}

.header_link_padding {
  padding-left: 25px;
}

#main_header_links a {
  text-decoration: none;
}

#main_header_links a:hover {
  text-decoration: underline;
  color: #fff;
}

#main_header_link_categories {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  min-height: 64px;
}

.header_link_icon_rotate {
  padding-left: 5px;
  transition: 100ms;
}

#main_header_link_categories:hover .header_link_icon_rotate {
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Chrome, Safari, Opera */
  transform: rotate(90deg);
  margin-left: 2px;
  transition: 100ms;
}

#slide {
  right: 0;
  position: absolute;
  background-color: #fff;
  -webkit-box-shadow: 0px 5px 10px -1px rgba(112, 112, 112, 1);
  -moz-box-shadow: 0px 5px 10px -1px rgba(112, 112, 112, 1);
  box-shadow: 0px 5px 10px -1px rgba(112, 112, 112, 1);
  display: none;
  z-index: 999;
  width: 320px;
}

#touch {
  position: absolute;
  opacity: 0;
  height: 0px;
}

#touch:hover + #slide {
  display: block;
}

#slide:hover {
  display: block;
}

.slide_wrapper {
  /* margin:10px; */
  z-index: 999;
}

.slide_wrapper ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.slide_wrapper a {
  text-decoration: none;
}

#search_bar {
  display: inline-block;
}

#category_image {
  float: left;
  margin-left: 5px;
}

#nav_categories tr {
  width: 100%;
}

#nav_category_image {
  width: 40px;
  max-width: 40px;
  min-width: 40px;
}

#nav_category_link {
  width: 270px;
}

#nav_categories {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #000000;
  cursor: pointer;
  line-height: 25px;
  background-color: #fff;
  padding: 4px 15px 4px 15px;
}

#nav_categories:hover {
  background-color: #004d6e;
  color: #fff;
  font-size: 15px;
}

#nav_categories img {
  max-width: 20px;
  max-height: 20px;
}

#nav_categories:hover img {
  -webkit-filter: invert(100%) !important;
  filter: invert(100%) !important;
  display: inline;
}

#category_arrow {
  float: right;
  display: none;
  margin-top: 7px;
  margin-bottom: 7px;
}


/* SEARCH */

#search_bar {
  margin-left: 40px;
}

#search_bar input {
  width: 320px;
  height: 26px;
  border-radius: 3px;
  border: none;
  padding-left: 10px;
  border: 1px solid black;
}

#search_bar button {
  width: 70px;
  height: 26px;
  border-radius: 3px;
  margin-left: 5px;
  border: none;
  padding: 0px;
  border: 1px solid #ccc;
  background-color: #343434;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 400;
}

#search_bar button:hover {
  background-color: #202020;
  cursor: pointer;
}


/* PRE HEADER */

#pre_header_content_left {
  float: left;
}

#pre_header_content_left ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 30px;
}

#pre_header_content_left li {
  display: inline;
  border-right: 1px solid #292929;
  border-left: 1px solid #292929;
  padding: 6px 15px 5px 15px;
  margin-right: -2px;
  font-size: 14px;
}

#pre_header_content_left a {
  text-decoration: none;
  color: #fff;
}

#pre_header_content_left li:hover {
  background-color: #4e4e4e;
}

#pre_header_content_right {
  float: right;
}

#pre_header_content_right ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 30px;
}

#pre_header_content_right li {
  display: inline;
  border-right: 1px solid #292929;
  border-left: 1px solid #292929;
  padding: 6px 15px 5px 15px;
  margin-right: -2px;
  font-size: 14px;
}

#pre_header_content_right a {
  text-decoration: none;
  color: #fff;
}


/*TEST */

#pre_header_content_right li:hover {
  background-color: #4e4e4e;
}

.navigation_icons {
  margin-right: 5px;
}

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="js/footer.js"></script>
</head>

<body onload="document.body.className += ' loaded';">


  <div id="header_wrapper">
    <div id="pre_header">
      <div id="pre_header_content">

        <div id="pre_header_content_left">
          <ul>

            <a href="#.php">
              <li><img class="navigation_icons" src="images/navigation/bookmark.png" width="12"></img>Stores</li>
            </a>
            <a id="hide" href="#.php">
              <li><img class="navigation_icons" src="images/navigation/plus.png" width="12"></img>Submit a code</li>
            </a>
            <a id="hide" href="#.php">
              <li><img class="navigation_icons" src="images/navigation/voucher.png" width="12"></img>Advertise</li>
            </a>
            <a href="#.php">
              <li><img class="navigation_icons" src="images/navigation/speaker.png" width="12"></img>Contact Us</li>
            </a>

          </ul>
        </div>

        <div id="pre_header_content_right">
          <ul>


            <a href="login.php">
              <li><img class="navigation_icons" src="images/navigation/login.png" width="12"></img>Login</li>
            </a>
            <a href="register.php">
              <li><img class="navigation_icons" src="images/navigation/thumb.png" width="12"></img>Sign up</li>
            </a>


          </ul>
        </div>

      </div>
    </div>


    <div id="main_header">
      <div id="main_header_content">

        <div id="main_header_logo">
          <a href="index.php"><span class="helper"></span><img class="logo" src="images/navigation/logo.png" width="250"></img></a>
        </div>


        <form action="search_results.php" method="POST" id="search_bar">
          <input type="text" class="search_term" name="search" placeholder="Search for a store..." maxlength="20" autocomplete="off">
          <button type="submit" class="search_button" value="search">Search</button>
        </form>

        <div id="main_header_links_wrapper">
          <div id="main_header_links">
            <ul>
              <label for="touch"><div id="main_header_link_categories"><a href="user_all_categories.php"><li class="main_header_link_categories">Categories</li><img class="header_link_icon_rotate" src="images/navigation/arrow_right.png" height="12"></img></a></div></label>
              <a href="/pages/newest.php">
                <li class="header_link_padding">Newest</li><img class="header_link_icon" src="images/navigation/arrow_right.png" height="12"></img>
              </a>
              <a href="/pages/stores.php">
                <li class="header_link_padding">Stores</li><img class="header_link_icon" src="images/navigation/arrow_right.png" height="12"></img>
              </a>
            </ul>
          </div>
        </div>

        <input type="checkbox" id="touch">
        <div id="slide">
          <div class="slide_wrapper">
            <ul id="categories">

              <a href="category_page.php?category=hi">
                <table id="nav_categories">
                  <tr>
                    <li>
                      <td id="nav_category_image"><img src="images/categories/hi.png"></td>
                      <td id="nav_category_link">Hi<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td>
                    </li>
                  </tr>
                </table>
              </a>
              <a href="category_page.php?category=high">
                <table id="nav_categories">
                  <tr>
                    <li>
                      <td id="nav_category_image"><img src="images/categories/high.png"></td>
                      <td id="nav_category_link">High<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td>
                    </li>
                  </tr>
                </table>
              </a>
              <a href="category_page.php?category=non">
                <table id="nav_categories">
                  <tr>
                    <li>
                      <td id="nav_category_image"><img src="images/categories/non.png"></td>
                      <td id="nav_category_link">Non<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td>
                    </li>
                  </tr>
                </table>
              </a>
              <a href="category_page.php?category=test">
                <table id="nav_categories">
                  <tr>
                    <li>
                      <td id="nav_category_image"><img src="images/categories/test.png"></td>
                      <td id="nav_category_link">Test<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td>
                    </li>
                  </tr>
                </table>
              </a>
              <a href="category_page.php?category=travel">
                <table id="nav_categories">
                  <tr>
                    <li>
                      <td id="nav_category_image"><img src="images/categories/travel.png"></td>
                      <td id="nav_category_link">Travel<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td>
                    </li>
                  </tr>
                </table>
              </a>
              <a href="category_page.php?category=World">
                <table id="nav_categories">
                  <tr>
                    <li>
                      <td id="nav_category_image"><img src="images/categories/World.png"></td>
                      <td id="nav_category_link">World<img id="category_arrow" src="images/navigation/arrow_right_bl.png" width="10" height="10"></td>
                    </li>
                  </tr>
                </table>
              </a>
            </ul>

          </div>

        </div>

      </div>
    </div>
  </div>
  <div id="wrapper">


    <div id="tile_wrapper">


      <div id="tile_image_wrapper">

        <a href="storepage.php?name=Th asx sdaidj jsdiasdjo jsd">

          <div id="tile_inner_wrapper"><img src="images/stores/Th asx sdaidj jsdiasdjo jsd.png"></div>
        </a>

      </div>


      <div id="tile_image_wrapper">

        <a href="storepage.php?name=rolex">

          <div id="tile_inner_wrapper"><img src="images/stores/rolex.png"></div>
        </a>

      </div>


      <div id="tile_image_wrapper">

        <a href="storepage.php?name=zzzzzzzzzzzzzzzz">

          <div id="tile_inner_wrapper"><img src="images/stores/zzzzzzzzzzzzzzzz.png"></div>
        </a>

      </div>


      <div id="tile_image_wrapper">

        <a href="storepage.php?name=hi">

          <div id="tile_inner_wrapper"><img src="images/stores/hi.png"></div>
        </a>

      </div>


      <div id="tile_image_wrapper">

        <a href="storepage.php?name=E">

          <div id="tile_inner_wrapper"><img src="images/stores/E.png"></div>
        </a>

      </div>


      <div id="tile_image_wrapper">

        <a href="storepage.php?name=e">

          <div id="tile_inner_wrapper"><img src="images/stores/e.png"></div>
        </a>

      </div>


      <div id="tile_image_wrapper">

        <a href="storepage.php?name=hi">

          <div id="tile_inner_wrapper"><img src="images/stores/hi.png"></div>
        </a>

      </div>


      <div id="tile_image_wrapper">

        <a href="storepage.php?name=X">

          <div id="tile_inner_wrapper"><img src="images/stores/X.png"></div>
        </a>

      </div>


      <div id="tile_image_wrapper">

        <a href="storepage.php?name=W">

          <div id="tile_inner_wrapper"><img src="images/stores/W.png"></div>
        </a>

      </div>


      <div id="tile_image_wrapper">

        <a href="storepage.php?name=bt">

          <div id="tile_inner_wrapper"><img src="images/stores/bt.png"></div>
        </a>

      </div>


      <div id="tile_image_wrapper">

        <a href="storepage.php?name=bitcoin">

          <div id="tile_inner_wrapper"><img src="images/stores/bitcoin.png"></div>
        </a>

      </div>


      <div id="tile_image_wrapper">

        <a href="storepage.php?name=E">

          <div id="tile_inner_wrapper"><img src="images/stores/E.png"></div>
        </a>

      </div>


      <div id="tile_image_wrapper">

        <a href="storepage.php?name=d">

          <div id="tile_inner_wrapper"><img src="images/stores/d.png"></div>
        </a>

      </div>


      <div id="tile_image_wrapper">

        <a href="storepage.php?name=roman">

          <div id="tile_inner_wrapper"><img src="images/stores/roman.png"></div>
        </a>

      </div>


      <div id="tile_image_wrapper">

        <a href="storepage.php?name=british gas ">

          <div id="tile_inner_wrapper"><img src="images/stores/british gas .png"></div>
        </a>

      </div>


      <div id="tile_image_wrapper">

        <a href="storepage.php?name=J">

          <div id="tile_inner_wrapper"><img src="images/stores/J.png"></div>
        </a>

      </div>


      <span class="stretch"></span>
    </div>


    <br>


    <h1>Random Coupons</h1>


    <div id="coupon">

      <div id="coupon_wrapper">
        <div id="coupon_left">
          <div id="coupon_image"><img src="images/stores/bt.png"></div>
          <div id="coupon_expire_wrapper">n/a</div>
        </div>
        <div id="coupon_right">
          <div id="design_coupon_title"><a href="http://www.d">D</a>DEAL</div>
        </div>
      </div><br>
    </div>
    <div id="coupon">

      <div id="coupon_wrapper">
        <div id="coupon_left">
          <div id="coupon_image"><img src="images/stores/british gas .png"></div>
          <div id="coupon_expire_wrapper">
            <div id="coupon_expire_tag">Expires: </div>
            <div id="coupon_expire_date">22 / Jun / 16</div>
          </div>
        </div>
        <div id="coupon_right">
          <div id="design_coupon_title"><a href="http://www.sgsg" target="_blank">Best</a></div>
          <div id="coupon_instruction">Copy this code and enter at the checkout</div>
          <div id="coupon_code_wrapper">
            <div id="coupon_promo_code">SJHBJH</div>
            <a href="http://www.sgsg" target="_blank">
              <div id="coupon_button">Go to<img src="images/navigation/arrow_right_bl.png" width="13" height="13"></div>
            </a>
          </div>
        </div>
      </div><br>
    </div><br>


    <h1>All Categories</h1>
    <br>


    <a href="category_page.php?category=hi">hi</a><br><a href="category_page.php?category=high">high</a><br><a href="category_page.php?category=non">non</a><br><a href="category_page.php?category=test">test</a><br><a href="category_page.php?category=travel">travel</a><br>
    <a
      href="category_page.php?category=World">World</a><br>
      <a href="admin.php">Admin</a>

      <h1>Store Links</h1>


  </div>


  <div id="footer"></div>

＆＃13;

另外，看看

#main_header_links_wrapper {
  float: right;
  line-height:64px;
}

并摆脱那些在那里似乎被遗忘的寂寞......

跨浏览器兼容性问题（firefox）

1 个答案: