Safari，Opera，IE的CSS问题

时间：2015-02-25 14:46:45

标签： html css safari rendering opera

＆＃13;
＆＃13; 
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;}
＆＃13; 
<form id=header-search>
<input class=searchbox placeholder="Search Spout TV">
<input type=submit class=button value=""/>
</form>
＆＃13;
＆＃13;
＆＃13;

我目前正在构建一个网站，在我的索引页面上，我遇到了一些渲染问题。

我遇到的问题是在Safari中，搜索栏图像是一个精灵图像，是一个像素，每次我在我的CSS中重新调整它，问题在其他浏览器上修复，按钮位于1px以上。

我遇到的第二个问题，当在Chrome和Firefox中运行页面时，滑块转盘居中，但在IE，Opera和Safari中运行页面时，滑块转盘更多位于页面的左侧。 我把我的代码保留在margin-left：auto;和保证金权利：auto;我知道将所有内容集中在div中。

我很困惑为什么这些错误正在发生，并希望帮助修复它们。

如果您希望看到该页面正在运行，您可以访问spouttv.com/spout/index.php，这样您就可以更好地了解我所说的内容。

以下是html页面和css的代码。

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

这可能是因为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

Safari会将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

Chrome会将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。

关于{{1}}的更多信息：

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

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

相关问题
最新问题