javascript - 跨浏览器兼容性问题 (firefox)-6ren

javascript - 跨浏览器兼容性问题 (firefox)

转载作者：太空宇宙更新时间：2023-11-03 22:57:21

我在跨浏览器兼容性方面遇到了一些问题，主要是我的导航栏，我已经检查了导航栏的所有 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，我们将不胜感激。再次感谢

最佳答案

您的文本链接正在换行，以 Logo 应该出现的方式出现。

Vertical-align 应设置为 Logo 的 wrapper 以与周围的内容/line-height 交互。

{white-space:nowrap} 用于第一次修复，直到您发现为什么字体显示不一样。在 ul 上重置 padding 可能也是如此:http://codepen.io/gc-nomade/pen/YWGPvz

#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;
}

<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>

还有，看看

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

并摆脱似乎被遗忘在那里的孤独的 ul ...

关于javascript - 跨浏览器兼容性问题 (firefox)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37888147/

文章推荐： python - 将 RGB 中的随机颜色分配给图像

文章推荐： C# WPF Datagrid 如何禁用特定列上的选择单元格

文章推荐： node.js - 循环迭代与等待异步问题

文章推荐： c# - Dotliquid 模板渲染输出文件路径

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 跨浏览器兼容性问题 (firefox)