在Safari/Chrome的文本上水平菜單的CSS位置問題

我已經搜索了高和低的答案 - 我已經嘗試了一些東西，如刪除字符集UTF 8，添加清除兩個，確保所有容器寬度設置等。在Safari/Chrome的文本上水平菜單的CSS位置問題

您可以在下面的CSS和HTML中發現問題，爲什麼當我將這個自定義主題從html轉換爲Wordpress時，它突然決定它會在webkit瀏覽器中以不同的方式顯示菜單？它在Firefox上仍然正常工作。

任何幫助將非常感激，所以我可以再次睡一會兒！

這是頭

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

這在HTML中的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; 

}

來源

2011-03-31 Rylan

看起來好像這個問題是由一個幻象空所致鏈接<div class="menu">內的<ul>。見附圖。

enter image description here

，因爲它似乎並沒有在這使我覺得它正在由WordPress生成的源代碼這很奇怪？

如果您使用Chrome的開發人員插件，您可以檢查元素查看鏈接正在生成的位置。

來源

2011-03-31 07:08:39 Dan

在Safari/Chrome的文本上水平菜單的CSS位置問題

回答

相關問題