Safari，Opera，IE的CSS問題

Question

 input.searchbox{-webkit-border-radius:10px;-moz-border-radius:10px;background-color:#af5354;border:1px solid #af5354;background-color:#AF5354;border:1px solid #AF5354;border-radius:5px;color:#FFF;float:left;height:17px;margin-left:0.5em;margin-top:1.4em;outline:0px none;padding-left:0.5em;padding-top:0.4em;text-align:left;width:170px;} input.searchbox:focus{background:#e87476;background:-moz-linear-gradient(top, #e87476 0%, #e87476 20%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #e87476), color-stop(20%, #e87476));outline:0;color:#FFF;} *::-webkit-input-placeholder{color:#FFF;} *:-moz-placeholder{color:#FFF;} *::-moz-placeholder{color:#FFF;} *:-ms-input-placeholder{color:#FFF;} input.button{background:url("../../assets/images/sprite.png") -142px -7px;border:none;float:left;height:28px;margin:16px 0px 0px -28px;overflow:hidden;padding:0;width:38px;} input.button:hover{background:url("../../assets/images/sprite.png") -142px -47px;border:none;float:left;height:28px;margin:16px 0px 0px -28px;overflow:hidden;padding:0;width:38px;} input[type=search]{-webkit-appearance:none;} input.searchbox{border-radius:10px;} @-moz-document url-prefix() {.container {top: 00px;} 

 <form id=header-search> <input class=searchbox placeholder="Search Spout TV"> <input type=submit class=button value=""/> </form> 

我目前正在構建一個網站，在我的索引頁面上，我遇到了一些渲染問題。

我遇到的問題是在Safari中，搜索欄圖像是一個精靈圖像，是一個像素，每次我在我的CSS中重新調整它，問題在其他瀏覽器上修復，按鈕被放置1px以上。

第二個問題，當我在Chrome和Firefox中運行頁面時，滑塊輪播是居中的，但是當在IE，Opera和Safari中運行頁面時，滑塊輪播更多地位於頁面的左側。 我把我的代碼保留在margin-left：auto; 和保證金權利：auto; 我知道中心內的所有內容。

我很困惑為什么這些錯誤正在發生，並希望幫助修復它們。

如果你想看到頁面正在運行，你可以去spouttv.com/spout/index.php，這樣你就可以更好地理解我在說什么。

下面是html頁面和css的代碼。

 @charset "UTF-8";article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;} fieldset{margin:0;padding:0;border:0;} input:focus,textarea:focus{outline:none;} body{background:#000;font-family:Arial, Helvetica, sans-serif;color:#444;margin:0;font-size:1.2em;} #logo{border:none;float:left;height:50px;margin:-5px 5px 0px 0px;width:130px;} #navmenu{color:#FFF;font-size:18px;list-style:outside none none;margin:20px 5px 5px 5px;text-decoration:none;} input.searchbox{-webkit-border-radius:10px;-moz-border-radius:10px;background-color:#af5354;border:1px solid #af5354;background-color:#AF5354;border:1px solid #AF5354;border-radius:5px;color:#FFF;float:left;height:19px;margin-left:0.5em;margin-top:1.3em;outline:0px none;padding-left:0.5em;padding-top:0.3em;text-align:left;width:170px;} input.searchbox:focus{background:#e87476;background:-moz-linear-gradient(top, #e87476 0%, #e87476 20%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #e87476), color-stop(20%, #e87476));outline:0;color:#FFF;} *::-webkit-input-placeholder{color:#FFF;} *:-moz-placeholder{color:#FFF;} *::-moz-placeholder{color:#FFF;} *:-ms-input-placeholder{color:#FFF;} input.button{padding:0px;margin:15px 0px 0px -28px;width:38px;height:28px;border:0;float:left;border:none;background:url("../../assets/images/sprite.png") -142px -7px;overflow:hidden;} input.button:hover{border:0;padding:0;margin:15px 0px 0px -28px;width:38px;height:28px;background:url("../../assets/images/sprite.png") -142px -47px;float:left;border:none;} input[type=search]{-webkit-appearance:none;} #navmenu a{color:#FFF;text-decoration:none;} #navmenu a:hover{text-decoration:none;} .cf:before, .cf:after{content:"";display:table;} .cf:after{clear:both;} .cf{zoom:1;} #header-nav{padding:8px;background-color:#8C080A;background-image:-webkit-gradient(linear, left top, left bottom, from(#a8090c), to(#8c080a));background-image:-webkit-linear-gradient(top, #a8090c, #8c080a);background-image:-moz-linear-gradient(top, #a8090c, #8c080a);background-image:-ms-linear-gradient(top, #a8090c, #8c080a);background-image:-o-linear-gradient(top, #a8090c, #8c080a);background-image:linear-gradient(top, #a8090c, #8c080a);-moz-box-shadow:0 -3px 3px rgba(0,0,0,.5) inset;-webkit-box-shadow:0 -3px 3px rgba(0,0,0,.5) inset;box-shadow:0 -3px 3px rgba(0,0,0,.5) inset;height:50px;position:fixed;width:100%; z-index:999;} nav{font-size:16px;font-weight:bold;margin-left:auto;margin-right:auto;width:1024px;} nav ul{margin:20px 0px 0px;padding:0;list-style:none;position:relative;float:right;background:from(#a8090c), to(#8c080a);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;} nav li{float:left;} nav #login{border-right:1px solid #fff;-moz-box-shadow:1px 0 0 #fff;-webkit-box-shadow:1px 0 0 #fff;box-shadow:1px 0 0 #fff;} nav #login-trigger, nav #signup a{display:inline-block;*display:inline;*zoom:1;height:25px;line-height:25px;font-weight:bold;padding:0 8px;text-decoration:none;color:#FFF;} nav #signup a{-moz-border-radius:0 3px 3px 0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;} nav #login-trigger{-moz-border-radius:3px 0 0 3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;} nav #login-trigger:hover, nav #login .active, nav #signup a:hover{background:from(#a8090c), to(#8c080a);} nav #login-content{display:none;position:absolute;top:35px;right:0;z-index:999;background:#444343;background-image:-webkit-gradient(linear, left top, left bottom, from(#444343), to(#444343));background-image:-webkit-linear-gradient(top, #444343, #444343);background-image:-moz-linear-gradient(top, #444343, #444343);background-image:-ms-linear-gradient(top, #444343, #444343);background-image:-o-linear-gradient(top, #444343, #444343);background-image:linear-gradient(top, #444343, #444343);padding:15px;-moz-box-shadow:0 2px 2px -1px rgba(0,0,0,.9);-webkit-box-shadow:0 2px 2px -1px rgba(0,0,0,.9);box-shadow:0 2px 2px -1px rgba(0,0,0,.9);-moz-border-radius:3px 0 3px 3px;-webkit-border-radius:3px 0 3px 3px;border-radius:3px 0 3px 3px;} nav li #login-content{right:0;width:250px;} #inputs input{background:#7c7c7c;padding:6px 5px;margin:0 0 5px 0;width:238px;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 1px #ccc inset;-webkit-box-shadow:0 1px 1px #ccc inset;box-shadow:0 1px 1px #ccc inset;color:#FFF;} #inputs input:focus{background-color:#7c7c7c;border-color:#e8c291;outline:none;-moz-box-shadow:0 0 0 1px #e8c291 inset;-webkit-box-shadow:0 0 0 1px #e8c291 inset;box-shadow:0 0 0 1px #e8c291 inset;} #inputs input{background:#7c7c7c;padding:6px 5px;margin:0 0 5px 0;width:238px;border:1px solid #ccc;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 1px #ccc inset;-webkit-box-shadow:0 1px 1px #ccc inset;box-shadow:0 1px 1px #ccc inset;color:#FFF;} #inputs input:focus{background-color:#7c7c7c;border-color:#e8c291;outline:none;-moz-box-shadow:0 0 0 1px #e8c291 inset;-webkit-box-shadow:0 0 0 1px #e8c291 inset;box-shadow:0 0 0 1px #e8c291 inset;} #login #actions{margin:10px 0 0 0;} #login #submit{background-color:#d14545;background-image:-webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));background-image:-webkit-linear-gradient(top, #e97171, #d14545);background-image:-moz-linear-gradient(top, #e97171, #d14545);background-image:-ms-linear-gradient(top, #e97171, #d14545);background-image:-o-linear-gradient(top, #e97171, #d14545);background-image:linear-gradient(top, #e97171, #d14545);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-shadow:0 1px 0 rgba(0,0,0,.5);-moz-box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;-webkit-box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;border:1px solid #7e1515;float:left;height:30px;padding:0;width:100px;cursor:pointer;font:bold 14px Arial, Helvetica;color:#fff;margin-right:3px;} #login #submit:hover, #login #submit:focus{background-color:#e97171;background-image:-webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));background-image:-webkit-linear-gradient(top, #d14545, #e97171);background-image:-moz-linear-gradient(top, #d14545, #e97171);background-image:-ms-linear-gradient(top, #d14545, #e97171);background-image:-o-linear-gradient(top, #d14545, #e97171);background-image:linear-gradient(top, #d14545, #e97171);} #login #submit:active{outline:none;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;} #login #submit::-moz-focus-inner{border:none;} #login #forgot{background-color:#d14545;background-image:-webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));background-image:-webkit-linear-gradient(top, #e97171, #d14545);background-image:-moz-linear-gradient(top, #e97171, #d14545);background-image:-ms-linear-gradient(top, #e97171, #d14545);background-image:-o-linear-gradient(top, #e97171, #d14545);background-image:linear-gradient(top, #e97171, #d14545);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-shadow:0 1px 0 rgba(0,0,0,.5);-moz-box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;-webkit-box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;border:1px solid #7e1515;float:left;height:30px;padding:0;width:144px;cursor:pointer;font:bold 14px Arial, Helvetica;color:#fff;margin-left:3px;} #login #forgot:hover, #login #forgot:focus{background-color:#e97171;background-image:-webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));background-image:-webkit-linear-gradient(top, #d14545, #e97171);background-image:-moz-linear-gradient(top, #d14545, #e97171);background-image:-ms-linear-gradient(top, #d14545, #e97171);background-image:-o-linear-gradient(top, #d14545, #e97171);background-image:linear-gradient(top, #d14545, #e97171);} #login #forgot:active{outline:none;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;} #login #forgot::-moz-focus-inner{border:none;} #login #passwordbtn{background-color:#d14545;background-image:-webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));background-image:-webkit-linear-gradient(top, #e97171, #d14545);background-image:-moz-linear-gradient(top, #e97171, #d14545);background-image:-ms-linear-gradient(top, #e97171, #d14545);background-image:-o-linear-gradient(top, #e97171, #d14545);background-image:linear-gradient(top, #e97171, #d14545);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-shadow:0 1px 0 rgba(0,0,0,.5);-moz-box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;-webkit-box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;box-shadow:0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;border:1px solid #7e1515;float:left;height:30px;padding:0;width:144px;cursor:pointer;font:bold 14px Arial, Helvetica;color:#fff;margin-right:3px;} #login #passwordbtn:hover, #login #passwordbtn:focus{background-color:#e97171;background-image:-webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));background-image:-webkit-linear-gradient(top, #d14545, #e97171);background-image:-moz-linear-gradient(top, #d14545, #e97171);background-image:-ms-linear-gradient(top, #d14545, #e97171);background-image:-o-linear-gradient(top, #d14545, #e97171);background-image:linear-gradient(top, #d14545, #e97171);} #login #passwordbtn:active{outline:none;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;box-shadow:0 1px 4px rgba(0, 0, 0, 0.5) inset;} #login #passwordbtn::-moz-focus-inner{border:none;} #login label{color:#fff;float:left;line-height:30px;} #login label input{position:relative;top:2px;right:2px;} #about{margin:15px;} #about a{color:#555;} .body_container{margin:0 auto;padding:40px 15px;width:1024px; } p.adds { margin: 0 auto; width: 100%; } p.add-one { float: left; margin: 5px 14px; } p.add-two { float: left; margin: 5px 14px; } p.add-three { float: left; margin: 5px 14px; } p.add-four { float: left; margin: 5px 14px; } p.add-five { float: left; margin: 5px 14px; } .headertext { margin: 5px 0 5px 0; padding-top: 5px; } #carousel { margin-left: auto; margin-right: auto; width: 960px; } #carousel img{height:100px;width:100px;padding:5px; margin: 0 5px; background-color:#522424;background-image:-webkit-gradient(linear, left top, left bottom, from(#a8090c), to(#8c080a));background-image:-webkit-linear-gradient(top, #a8090c, #8c080a); } .next, .next2, .next3, .next4 {float:right;color:#FFF;background:none;text-decoration:underline;border:0px;} .prev, .prev2, .prev3, .prev4 {float:left;color:#FFF;background:none;text-decoration:underline;border:0px;} #entertainment { list-style-type: none; margin-left: auto; margin-right: auto; width: 1024px; } #entertainment img{float: left;height:235px;width:235px;padding:5px; margin: 0 5px; background-color:#522424;background-image:-webkit-gradient(linear, left top, left bottom, from(#a8090c), to(#8c080a));background-image:-webkit-linear-gradient(top, #a8090c, #8c080a); } section{ float: left; margin: 5px 14px; width: 100%; } section h2 { font: Helvetica,"Helvetica neue", Arial, sans-serif; font-size: 1.25em; color: #FFF; padding-bottom: 10px; margin: 0; } footer{ clear:both !important; width:100%; height: 20px; padding: 10px; color:#FFF ; border-top: 1px solid #fff; } #footertext { margin: 0 auto; width: 1024px; } p.footertext, .footertext { text-decoration: none; color: #FFF; margin: 0px 10px; float: left; font-size: 0.8em; } 

 <!DOCTYPE html> <html> <head> <title>Welcome to Spout TV</title> <link rel=stylesheet href="scripts/css/main.css" type="text/css"> <link rel="stylesheet" href="scripts/css/style.css" type="text/css"> <link rel="stylesheet" href="scripts/css/advanced-carousel.css" type="text/css"> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="scripts/js/login.js"></script> <script src="scripts/js/functions.js"></script> <script src="scripts/js/jquery1.9.0.js"></script> <script src="scripts/js/advanced-carousel.js"></script> <script src="scripts/js/custom.js"></script> <script type="text/javascript" src="scripts/js/jquery.js"></script> <script type="text/javascript" src="scripts/js/jcarousel.js"></script> <script>document.createElement('article');document.createElement('section');document.createElement('aside');document.createElement('hgroup');document.createElement('nav');document.createElement('header');document.createElement('footer');document.createElement('figure');document.createElement('figcaption');</script> <script type="text/javascript"> $(function(){ $(".carousel1").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", visible: 7, speed: 1000, }); $(".carousel2").jCarouselLite({ btnNext: ".next2", btnPrev: ".prev2", visible: 7, speed: 1000, }); $(".carousel3").jCarouselLite({ btnNext: ".next3", btnPrev: ".prev3", visible: 7, speed: 1000, }); $(".carousel4").jCarouselLite({ btnNext: ".next4", btnPrev: ".prev4", visible: 7, speed: 1000, }) }) </script> </head> <body> <header> <div id="header-nav"> <nav> <a href="http://www.spouttv.com/"><img src="assets/images/logo.png" id=logo height="50" width="130" alt="Spout TV"></a> <li id=navmenu><a href="#">TV Shows</a></li> <li id=navmenu><a href="#">Movies</a></li> <li id=navmenu><a href="#">Documentaries</a></li> <li id=navmenu><a href="#">Kids Shows</a></li> <li id=navmenu><a href="#">Favourites</a></li> <form id=header-search> <input class=searchbox placeholder="Search Spout TV"> <input type=submit class=button value=""/> </form> <ul> <li id=login> <a id=login-trigger href="#"> Log in <span>&#x25BC;</span> </a> <div id=login-content> <form id=userlogin role=search class=input-group action=login.php onsubmit="dologin(document.getElementById('user').value, document.getElementById('pass').value); return false;"> <fieldset id=inputs> <label>Email:</label> <input id=username type=email name=Email placeholder="Your Email address" required> <label>Password:</label> <input id=password type=password name=Password placeholder=Password required> </fieldset> <fieldset id=actions> <input type=submit id=submit value="Log in"><input type=button onclick="f_p();" id=forgot value="Forgot Password"> <label><input type=checkbox checked> Keep me signed in</label> </fieldset> </form> <form method=post style='display:none;' name=forgot_pwd id=forgot_pwd action=forgot_password.php> <fieldset id=inputs> <label>Enter Email address:</label> <input id=username type=email name=Email placeholder="Your Email address" required> </fieldset> <fieldset id=actions> <input type=submit id=passwordbtn name=for_pwd value="Send Password"/> <input type=button onclick='p_f();' id=submit value=Back /> </fieldset> </form> </div> </li> <li id=signup> <a href=register.html>Sign Up</a> </li> </ul> </nav> </div> </header> </div> <div class="body_container"> <div class="page"> <div class="carousel-outer"> <div class="left-transparent"> <span>Left Transparent</span> </div> <div class="carousel-inner"> <a class="left-link" href="#"><img src="assets/images/leftLink.png" alt="" width="26" height="47"></a> <div class="wrapper"> <img class="carousel-item" src="assets/banner/banner1.jpg" alt="" width="660" height="384"> <img class="carousel-item" src="assets/banner/banner2.jpg" alt="" width="660" height="384"> <img class="carousel-item" src="assets/banner/banner3.jpg" alt="" width="660" height="384"> <img class="carousel-item" src="assets/banner/banner4.jpg" alt="" width="660" height="384"> <img class="carousel-item" src="assets/banner/banner5.jpg" alt="" width="660" height="384"> </div> <a class="right-link" href="#"><img src="assets/images/rightLink.png" alt="" width="26" height="47"></a> <ul class="scroll-buttons"></ul> </div> <div class="right-transparent"> <span>Right transparent</span> </div> </div> </div> <article> <p class="adds"> <p class="add-one"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- main page 1 --> <ins class="adsbygoogle" style="display:inline-block;width:100px;height:100px;" data-ad-client="ca-pub-7465953501337362" data-ad-slot="1331107995"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </p> <p class="add-two"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- main page 1 --> <ins class="adsbygoogle" style="display:inline-block;width:100px;height:100px;" data-ad-client="ca-pub-7465953501337362" data-ad-slot="1331107995"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </p> <p class="add-three"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- main page 1 --> <ins class="adsbygoogle" style="display:inline-block;width:100px;height:100px;" data-ad-client="ca-pub-7465953501337362" data-ad-slot="1331107995"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </p> <p class="add-four"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- main page 1 --> <ins class="adsbygoogle" style="display:inline-block;width:100px;height:100px;" data-ad-client="ca-pub-7465953501337362" data-ad-slot="1331107995"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </p> <p class="add-five"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- main page 1 --> <ins class="adsbygoogle" style="display:inline-block;width:100px;height:100px;" data-ad-client="ca-pub-7465953501337362" data-ad-slot="1331107995"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </p> </p> </article> <section> <article> <header class="headertext"> <h2>Latest Episodes</h2> </header> <div id="carousel"> <div class="carousel1"> <ul> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> <li><img src="assets/adds/add5.png" alt="" /></li> <li><img src="assets/adds/add6.png" alt="" /></li> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> </ul> <button class="prev">Back</button><button class="next">Next</button> </div> </div> </article> <article> <header class="headertext"> <h2>Latest Movies</h2> </header> <div id="carousel"> <div class="carousel2"> <ul> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> <li><img src="assets/adds/add5.png" alt="" /></li> <li><img src="assets/adds/add6.png" alt="" /></li> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> </ul> <button class="prev2">Back</button><button class="next2">Next</button> </div> </div> </article> <article> <header class="headertext"> <h2>Latest Documentaries</h2> </header> <div id="carousel"> <div class="carousel3"> <ul> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> <li><img src="assets/adds/add5.png" alt="" /></li> <li><img src="assets/adds/add6.png" alt="" /></li> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> </ul> <button class="prev3">Back</button><button class="next3">Next</button> </div> </div> </article> <article> <header class="headertext"> <h2>Latest Kids Shows</h2> </header> <div id="carousel"> <div class="carousel4"> <ul> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> <li><img src="assets/adds/add5.png" alt="" /></li> <li><img src="assets/adds/add6.png" alt="" /></li> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> </ul> <button class="prev4">Back</button><button class="next4">Next</button> </div> </div> </article> <article> <header class="headertext"> <h2>Entertainment News</h2> </header> <div id="entertainment"> <div class="entertainment"> <li><img src="assets/adds/add1.png" alt="" /></li> <li><img src="assets/adds/add2.png" alt="" /></li> <li><img src="assets/adds/add3.png" alt="" /></li> <li><img src="assets/adds/add4.png" alt="" /></li> </div> </div> </article> </section> </div> <footer> <div id="footertext"> <a href="#" class="footertext">Terms of Use</a> <a href="#" class="footertext">Privacy Policy</a> <a href="#" class="footertext">Advertising</a> <a href="#" class="footertext">Help</a> <a href="#" class="footertext">About Us</a> <p class="footertext">&copy; 2014 - <?php echo date("Y") ?> Spout TV, Inc.</p> </div> </footer> </body> </html> 

Answer 1

這可能是因為在input.searchbox上使用em s作為margin和padding 。

input.searchbox {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    background-color: #AF5354;
    border: 1px solid #AF5354;
    background-color: #AF5354;
    border: 1px solid #AF5354;
    border-radius: 5px;
    color: white;
    float: left;
    height: 19px;
    margin-left: 0.5em;
    margin-top: 1.3em;
    outline: 0px none;
    padding-left: 0.5em;
    padding-top: 0.4em;
    text-align: left;
    width: 170px;
}

Safari計算margin和padding為：

margin-bottom: 0px;
margin-left: 8px;
margin-right: 0px;
margin-top: 17px;
padding-bottom: 1px;
padding-left: 8px;
padding-right: 0px;
padding-top: 6px;

Chrome會將margin和padding計算為：

margin-bottom: 0px;
margin-left: 8px;
margin-right: 0px;
margin-top: 17.6000003814697px;
padding-bottom: 1px;
padding-left: 8px;
padding-right: 0px;
padding-top: 6.40000009536743px;

em是基於字體大小的，這就是為什么瀏覽器之間可能存在差異的原因。 在這種情況下，最好使用px作為margin和padding 。

有關em的更多信息：

https://css-tricks.com/css-font-size/

http://www.impressivewebs.com/understanding-em-units-css/