CSS Проблемы с Safari, Opera, IE

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; и margin-right: auto; который я знаю, сосредотачивает все в пределах div.

Я озадачен тем, почему происходят эти ошибки, и хотел бы помочь их исправить.

Если вы хотите, чтобы страница работала, вы можете перейти на 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{ 
 
\t float: left; 
 
\t margin: 5px 14px; 
 
\t width: 100%; 
 
} 
 

 
section h2 { 
 
\t font: Helvetica,"Helvetica neue", Arial, sans-serif; 
 
\t font-size: 1.25em; 
 
\t color: #FFF; 
 
\t padding-bottom: 10px; 
 
\t margin: 0; 
 
} 
 

 
footer{ 
 
\t clear:both !important; 
 
\t width:100%; 
 
\t height: 20px; 
 
\t padding: 10px; 
 
\t color:#FFF ; 
 
\t border-top: 1px solid #fff; 
 
} 
 

 
#footertext { 
 
\t margin: 0 auto; 
 
\t width: 1024px; 
 
} 
 

 
p.footertext, .footertext { 
 
\t text-decoration: none; 
 
\t color: #FFF; 
 
\t margin: 0px 10px; 
 
\t float: left; 
 
\t 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]> 
 
\t \t <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
 
\t <![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"> 
 
\t $(function(){ 
 
\t \t $(".carousel1").jCarouselLite({ 
 
\t \t \t btnNext: ".next", 
 
\t \t \t btnPrev: ".prev", 
 
\t \t \t visible: 7, 
 
\t \t \t speed: 1000, 
 
\t \t }); 
 
\t \t $(".carousel2").jCarouselLite({ 
 
\t \t \t btnNext: ".next2", 
 
\t \t \t btnPrev: ".prev2", 
 
\t \t \t visible: 7, 
 
\t \t \t speed: 1000, 
 
\t \t }); 
 
     $(".carousel3").jCarouselLite({ 
 
\t \t \t btnNext: ".next3", 
 
\t \t \t btnPrev: ".prev3", 
 
\t \t \t visible: 7, 
 
\t \t \t speed: 1000, 
 
\t \t }); 
 
\t \t $(".carousel4").jCarouselLite({ 
 
\t \t \t btnNext: ".next4", 
 
\t \t \t btnPrev: ".prev4", 
 
\t \t \t visible: 7, 
 
\t \t \t speed: 1000, 
 
\t \t })    
 
\t }) 
 
</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"> 
 
\t <div class="left-transparent"> 
 
\t \t <span>Left Transparent</span> 
 
\t </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> 
 
\t </div> 
 
\t <div class="right-transparent"> 
 
     <span>Right transparent</span> 
 
     </div> 
 
</div> 
 
</div> 
 
<article> 
 
<p class="adds"> 
 
\t <p class="add-one"> 
 
\t \t <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> 
 
\t </p> 
 
\t <p class="add-two"> 
 
\t \t <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> 
 
\t </p> 
 
\t <p class="add-three"> 
 
\t \t <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> 
 
\t </p> 
 
\t <p class="add-four"> 
 
\t \t <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> 
 
\t </p> 
 
\t <p class="add-five"> 
 
\t \t <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> 
 
\t </p> 
 
</p> 
 
</article> 
 
<section> 
 
<article> 
 
<header class="headertext"> 
 
<h2>Latest Episodes</h2> 
 
</header> 
 

 
<div id="carousel"> 
 
\t 
 
    <div class="carousel1"> 
 
\t \t <ul> 
 
     \t <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> 
 
     \t <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"> 
 
\t 
 
    <div class="carousel3"> 
 
\t \t <ul> 
 
     \t <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"> 
 
\t 
 
    <div class="carousel4"> 
 
\t \t <ul> 
 
     \t <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"> 
 
\t <div class="entertainment"> 
 
\t  <li><img src="assets/adds/add1.png" alt="" /></li> 
 
\t \t <li><img src="assets/adds/add2.png" alt="" /></li> 
 
\t \t <li><img src="assets/adds/add3.png" alt="" /></li> 
 
\t \t <li><img src="assets/adds/add4.png" alt="" /></li> 
 
\t </div> 
 
</div> 
 
</article> 
 
</section> 
 

 

 
</div> 
 
<footer> 
 
\t <div id="footertext"> 
 
\t \t <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> 
 
\t </div> 
 
</footer> 
 
</body> 
 
</html>

источник

2015-02-25 Nekta Hondros

Сократите свой код на соответствующие части. – Cfreak

HTML <форма ID = заголовок-поиск> <входной класс = SearchBox заполнитель = "Поиск Носик ТВ"> <входной тип = представить класс = кнопка значение = "" /> –

возможно дубликат [CSS выпуска сафари] (http://stackoverflow.com/questions/28719374/css-issue-with-safari) –

Это, вероятно, связано с использованием em с для margin и padding на input.searchbox.

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

Сафари вычисляет 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;

Хром вычисляет 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/

источник

2015-03-04 09:26:21