Safari / Chrome文本上水平菜单的CSS位置问题
我已经搜索了这个问题的答案 - 我尝试过一些事情，例如删除charset UTF 8，添加清除两者，确保所有容器宽度都设置，等等。
你们是否可以在下面的CSS和HTML中发现问题，为什么当我将这个自定义主题从html转换为Wordpress时，它突然决定它会在webkit浏览器中呈现不同的菜单？它仍适用于Firefox。
任何帮助都会非常感激，所以我可以再次入睡！
这是标题的HTML
<body>
<div id="wrapper">
<div id="header">
<div id="social">
<ul>
<li id="spotify"><a href="http://open.spotify.com/artist/4Adcr34XrVCTVJbfvJGBxQ"></a>
<li id="myspace"><a href="http://myspace.com/silvermoths"></a>
<li id="twitter"><a href="http://twitter.com/silvermoths"></a>
<li id="facebook"><a href="http://www.facebook.com/silvermoths"></a>
</ul>
<form id="email" action='http://madmimi.com/signups/subscribe/29549' method='post'>
<label for='signup_email'>Enter Email:</label>
<input id='signup_email' class="text" name='signup[email]' type='text' /><br />
<input name='commit' class='button' type='submit' value='Signup now to keep informed' />
</form>
</div><!--end of social-->
<div id="banner">
<a href="http://silvermoths.com"><img src="<?php echo(get_bloginfo('template_directory')); ?>/images/logo.png" width="468" height="189" alt="Silvermoths" class="logo" />
<h1>Silvermoths</h1>
</div><!--end of banner-->
<div id="nav">
<ul>
<?php wp_page_menu('show_home=1'); ?>
</ul>
</div><!--end of navigation-->
</div><!--end of header-->
这是CSS：
/*
Theme Name: Silvermoths
Theme URI: http://silvermoths.com
Description: Custome theme for Silvemroths
Author: Rylan Holey
Version: 1.0
Tags: orange, social buttons, two coloumn
License:
License URI:
General comments (optional).
*/
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
/* CSS Document */
@font-face {
font-family: 'DejaVuSerifBook';
src: url('DejaVuSerif-webfont.eot');
src: local('☺'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontO0VgJAHF') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TendernessRegular';
src: url('Tenderness-webfont.eot');
src: url('Tenderness-webfont.eot?iefix') format('eot'),
url('Tenderness-webfont.woff') format('woff'),
url('Tenderness-webfont.ttf') format('truetype'),
url('Tenderness-webfont.svg#webfontaYPTm82W') format('svg');
font-weight: normal;
font-style: normal;
}
body {
margin: 0;
padding: 0;
background:url('images/body_bg.jpg');
background-color:#f05323;
background-repeat:no-repeat;
background-position:center top;
font-family:Georgia, "Times New Roman", Times, serif;
width: 100%;
display: table;
}
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
background-color: #f3f3f3;
border: 1px solid #ddd;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; /* optional rounded corners for browsers that support it */
margin: 10px;
padding-top: 4px;
text-align: center;
}
.wp-caption img {
border: 0 none;
margin: 0;
padding: 0;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
#wrapper {
position:relative;
text-align:left;
width: 960px;
margin-right: auto;
margin-left:auto;
border-bottom: #e87529 solid 10px;
}
#header {
width:960px;
height:350px !important;
}
#banner{
height: 189px;
width: 468px;
}
#banner img{
border-style: none;
}
#banner h1{
float:left;
text-indent: -9999px;
}
#banner .logo {
float:left;
width:468px;
margin-top: 45px;
margin-left: 20px;
}
#description h2{
text-indent: -9999px;
}
#social{
clear:both;
width:320px;
float:right;
margin-right: 10px
}
#social li, #social a {
height:64px;
display:block;
}
#social ul {
list-style:none;
margin:15px 0 0 0;
padding:0;
}
#social li {
display:inline;
float:right;
text-align:left;
margin-left:16px;
height:64px;
width:64px;
display:block;
}
#social a:link, #social a:visited {
text-decoration: none;
border-style: none;
}
#twitter {left:0px;width:64px;}
#twitter {background:url('images/twitter_sprite.png') 0 0;}
#twitter a:hover{background: url('images/twitter_sprite.png') 0 -65px;}
#twitter a:active{background: url('images/twitter_sprite.png') 0 -130px;}
#facebook {left:0px;width:64px;}
#facebook {background:url('images/facebook_sprite.png') 0 0;}
#facebook a:hover{background: url('images/facebook_sprite.png') 0 -65px;}
#facebook a:active{background: url('images/facebook_sprite.png') 0 -130px;}
#spotify {left:0px;width:64px;}
#spotify {background:url('images/spotify_sprite.png') 0 0;}
#spotify a:hover{background: url('images/spotify_sprite.png') 0 -65px;}
#spotify a:active{background: url('images/spotify_sprite.png') 0 -130px;}
#myspace {left:0px;width:64px;}
#myspace {background:url('images/myspace_sprite.png') 0 0;}
#myspace a:hover{background: url('images/myspace_sprite.png') 0 -65px;}
#myspace a:active{background: url('images/myspace_sprite.png') 0 -130px;}
#social img
{ border-style: none;
}
form#email
{
clear:both;
width:300px;
height:102px;
float:right;
display: block;
margin-top: 29px;
margin-bottom: 29px;
text-align: center;
padding:24px 0 0 0;
background-image: url(images/content_bg.png);
font-family:'TendernessRegular', Georgia, "Times New Roman", Times, serif;
font-size:22px;
}
label
{
color:#FFF;
}
#email .button {
margin-top:15px;
width:238px;
height:37px;
font-weight: bold;
font-size: 15px;
font-family:Arial, Sans serif;
color: white;
border: none;
background: url('images/signup_button.png') 0 0;
}
#email .button:hover {
margin-top:15px;
width:238px;
height:37px;
font-weight: bold;
font-size: 15px;
font-family:Arial, Sans serif;
color: white;
border: none;
background: url('images/signup_button.png') 0 -38px;
}
#email .button:active {
margin-top:15px;
width:238px;
height:37px;
font-weight: bold;
font-size: 15px;
font-family:Arial, Sans serif;
color: white;
border: none;
background: url('images/signup_button.png') 0 -77px;
}
#email .text {
height:30px;
}
#nav {
float:left;
clear:both;
font-family:'TendernessRegular', Georgia, "Times New Roman", Times, serif;
color: #e5e8e6;
font-size:30px;
height:70px;
width:960px;
text-align:left;
background-image: url('images/content_bg.png');
z-index:0;
}
#nav ul {
list-style:none;
margin:17px 0 0 0;
padding:0;
}
#nav li {
display:inline;
float:left;
text-align:left;
margin-left:0;
height:70px;
z-index:100;
}
#nav a:link, #nav a:visited {
padding: 15px 0.5em 15.5px 0.5em;
color: #e5e8e6;
text-decoration:none;
}
#nav a:hover {
color:#FFF;
}
#nav a:active {
color:#FFF;
font-weight:bold;
}
#sidebar {
float:right;
width:260px;
margin:15px 10px 15px 10px ;
padding:20px;
background-image: url('images/content_bg.png');
height: 100%;
}
#single img {
border:none;
background:none;
}
#content {
clear:both;
float:left;
width:580px;
margin:15px 10px 15px 10px;
padding:20px;
background-image: url('images/content_bg.png');
}
#content .post-image img {
float:left;
margin:15px 15px 15px 10px;
border-top: 1px solid #555;
padding: 10px;
background: #3c3a3a;
-webkit-box-shadow: 5px 5px 6px #242424;
-moz-box-shadow: 5px 5px 6px #242424;
box-shadow: 5px 5px 6px #242424;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#placeholder {
height:350px;
border: 1px solid #bb3e26;
margin-top:10px;
background: #FFE7CF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#placeholder .meta {
margin: 150px 10px 0 10px;
text-align:left;
}
#placeholder h3 {
font-family:'TendernessRegular', Georgia, "Times New Roman", Times, serif;
color: #bb3e26;
font-size:18px;
margin-top:0;
margin-bottom:0;
font-style: italic;
}
#text {
clear:both;
}
#footer h1, #sidebar h1, #content h1 {
font-family:'TendernessRegular', Georgia, "Times New Roman", Times, serif;
color:#FFF;
font-size:50px;
margin-top:0.3em;
margin-bottom:0;
font-weight:bold;
}
#sidebar h2, #content h2 {
font-family:'TendernessRegular', Georgia, "Times New Roman", Times, serif;
color:#FFF;
font-size:30px;
margin-top:0;
margin-bottom:0;
font-weight:bold;
}
#sidebar h3, #content h3 {
font-family:'TendernessRegular', Georgia, "Times New Roman", Times, serif;
color:#FFF;
font-size:22px;
margin-top:0;
margin-bottom:0;
font-weight:bold;
}
#sidebar h1+p, #sidebar h2+p, #content h1+p, #content h2+p, #placeholder h3+p {
margin-top:0;
}
#sidebar p, #content p {
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFF;
font-size:14px;
}
#content a:link, #content a:visited {
color: #bb3e26;
text-decoration:none;
}
#content a:hover {
color:#5e1f12;
}
#post {
padding-top:0.5em;
border-bottom:2px solid #5e1f12;
height:125px;
}
#post .thumb {
float:right;
border-style:solid;
border-color:#5e1f12 ;
border-width:2px;
margin:5px 10px 2px 5px;
}
#content a:link, #content a:visited {
color: #1D4896;
text-decoration:none;
}
#content a:hover {
color:#FFF;
background-color:#3c3a3a;
}
#content .post {
border-style: none;
}
#sidebar ul {
list-style:none
}
#searchform input {
margin-left:45px
}
#footer {
clear:both;
width:920px;
height:150px;
background-color:#f05323;
font-family:Georgia, "Times New Roman", Times, serif;
color: #fff;
padding:20px;
}
#footer .copyright {
float:right;
}
1 个答案:
答案 0 :(得分：1)
看起来好像问题是由<div class="menu">正上方<ul>内的虚拟空链接引起的。见附图。
这很奇怪，因为它似乎没有在源代码中导致我认为它是由wordpress生成的？
如果您使用Chrome的开发人员插件，则可以检查元素以查看链接的生成位置。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？