Safari/Chrome 上文本水平菜单的 CSS 位置问题
我已经四处寻找这个问题的答案 - 我尝试过一些事情,例如删除字符集 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;
}
I have searched high and low for an answer to this - there are a few things i've tried such as removing charset UTF 8, adding clear both, ensuring all container widths are set, and so on.
Can any of you spot the problem though in the CSS and HTML below as to why when I converted this custom theme from html into Wordpress it suddenly decided that it would render the menu differently in webkit browsers? It still works fine on Firefox.
Any help would be very much appreciated so i can get some sleep again!
This is for http://silvermoths.com
This is the HTML for the header
<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-->
This is the 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;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
看起来问题似乎是由
上方的
中的虚拟空链接引起的。请参阅附图。
这很奇怪,因为它似乎不在源代码中,这让我认为它正在生成通过wordpress?
如果您使用 Chrome 的开发者插件,您可以检查元素以查看链接的生成位置。
Looks as though the problem is being caused by a phantom empty link within the
<div class="menu">
just above the<ul>
. See attached image.It's weird because it doesn't seem to be in the source code which leads me to think it's being generated by wordpress?
If you use Chrome's developer plugin you can inspect the element to view where the link is being generated.