首先,我很确定带有填充/边距/边框的选项不是问题,因为我特意将它们设置为没有。
要查看问题,请转到此处:http://antemortem.thecomicseries.com/comics/last 向下滚动图像是一个带有'Page 1'的HTML下拉菜单。点击这里有一些其他选项,右边有一个额外的15px菜单,我根本无法理解。它不能像选项一样被点击,它不应该在那里,它使选项宽度大于180px,这就是它的设置。
请注意,我已经测试过,如果这个灰色空间出现在铬和歌剧院,那么它没有。 这让我相信它只出现在Firefox ...
要查看代码,请检查元素,因为它可能更容易调查,但如果不是,我可以通过HTML / CSS。
所以基本上我只是想要额外的灰色空间,所以选项并不比下拉菜单按钮本身宽。
谢谢!
HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<!-- Last Update: 23/05/2013 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss/">
<title>Ante Mortem | Page 1</title>
<style type="text/css">
#bottomnav {
margin-top: 10px;
}
.authorname {
padding-top: 5px;
padding-left: 10px;
}
.posttime {
padding-left: 10px;
}
#authorcontrol {
margin-top: 30px;
}
.fallback {
display: none;
position: absolute;
bottom: 0;
}
.dropcon {
padding: 5px 0 5px 0;
height: 18px;
width: 184px;
border: 2px solid #400000;
border-bottom: 0px solid #000000;
background-color: #5F0000;
bottom: 100%;
position: relative;
}
#main {
font-weight: strong;
}
option, .comicnavlink {
text-align: center;
width: 180px;
margin: auto;
}
option {
width: 180px;
padding: 0px;
margin: 0px;
border: 0px;
}
#comicnavigation {
height: 50px;
padding-bottom: 5px;
}
#authorccontrol {
margin: auto;
}
.acheader {
background-color: #4C0000;
height: 50px;
width: 780px;
margin-top: 15px;
}
.acheaderreply {
background-color: #4C0000;
height: 50px;
width: 740px;
margin-top: 15px;
}
.accontent {
background-color: black;
min-height: 100px;
height: auto;
width: 761px;
color: white;
word-wrap: break-word;
padding: 5px 10px 5px 5px;
border: 2px solid #4C0000;
}
.accontent p {
text-align: left;
}
.accontentreply {
background-color: black;
min-height: 100px;
height: auto;
width: 721px;
color: white;
word-wrap: break-word;
padding: 5px 10px 5px 5px;
border: 2px solid #4C0000;
}
.accontentreply p {
text-align: left;
}
.acfooter {
background-color: #4C0000;
height: 30px;
width: 775px;
font-size: 12px;
text-align: left;
padding-left: 5px;
}
.acfooterreply {
background-color: #4C0000;
height: 30px;
width: 735px;
font-size: 12px;
text-align: left;
padding-left: 5px;
}
#controls {
padding: 8px 0 5px 0;
font-size: 8px;
clear: both;
width: 184px;
height: 115px;
background: #5F0000;
border: 2px solid #400000;
border-top: 0px solid #000000;
position: relative;
right: 2px;
}
html, body, #container {
height: 100%;
}
body > #container {
height: auto; min-height: 100%;
}
body {
margin: 10px;
font-size: 62.5%;
font-family: lucida sans unicode, lucida grande, verdana, sans-serif;
color: #000000;
text-align: center;
min-width:650px;
background-image: url(http://fc01.deviantart.net/fs71/f/2013/098/f/8/alpha_test4_by_nightspirit174-d60wfqz.png);
background-attachment: fixed;
background-position: center bottom;
}
#container {
width: 800px;
margin: auto;
background-color: black;
box-shadow: 0 0 20px #990000;
-moz-box-shadow: 0 20px 20px #990000;
-webkit-box-shadow: 0 20px 20px #990000;
}
#headerimg {
cursor: pointer;
}
img {
border: 0px;
}
a {
color: #C84446;
text-decoration: none;
text-transform: uppercase;
}
a:hover {
color: #44A4C8;
cursor: default;
}
h1, h2, h3, h4, h5 {
font-family: lucida grande, lucida sans unicode, verdana, sans-serif;
line-height: 1em !important;
font-weight: normal;
margin: 0px;
padding: 0px;
}
#cf_ads {
display:table;
margin:7px auto;
text-align:center;
}
#slogan {
color:#BBB;
}
#navigation {
margin: 15px;
margin-left:30px;
margin-right:30px;
}
#nav {
padding: 0px;
margin: 0px;
list-style-type: none;
}
#nav li {
display: inline;
margin:0;
padding:0;
}
#nav li a {
display: inline-block;
background: #6B0000;
padding: 15px;
margin: 1px;
font: 1.5em century gothic, lucida grande, verdana, sans-serif;
color: #ffffff;
box-shadow: 0 0 5px #6B0000;
-moz-box-shadow: 0 0 5px #6B0000;
-webkit-box-shadow: 0 0 5px #6B0000;
}
#nav li a:hover {
color: black;
}
html>/**/body #wrap {/*hide from ie7 and below - they don't support display:table, so they get an actual table*/
margin: auto;
width: 720px;
display:table;
}
#wrapie {
margin: auto;
width: 720px;
}
#contentwrap {
margin: auto;
width: 780px;
text-align: center;
}
.comicnav {
margin: 0px;
padding: 0px;
display: inline;
color: white;
list-style-type: none;
}
.comicnav td {
margin: 0px;
text-align: center;
}
.comicnav td img {
cursor: pointer;
padding: 0px;
}
.comment, .permalinks {
margin-top: 10px;
background: #ffffff;
opacity: 0.95;
-moz-opacity: 0.95;
filter: alpha(opacity=95);
font: 1.2em lucida grande, lucida sans unicode, verdana, sans-serif;
}
.rating, .post {
margin-top: 5px;
background: #5F0000;
font: 1.5em lucida grande, lucida sans unicode, verdana, sans-serif;
}
#comments {
clear: both;
}
#authorcomments {
float: left;
}
.permalinks:hover {
opacity: 1.0;
-moz-opacity: 1.0;
filter: alpha(opacity=100);
}
#saveplace {
padding-bottom: 5px;
font-size: 1.5em;
}
.comment {
min-height: 100px;
height: auto !important;
with: 550px
}
.authorcomment {
min-height: 100px;
height: auto !important;
width: 550px;
}
.reply {
margin-left: 40px;
}
.authorcommentreply {
width: 740px;
margin-left: 40px;
}
.rating, .post, .permalinks {
padding: 5px;
}
.commentheader {
background: #1B1B1B;
padding: 5px 5px 2px 5px;
color: #3d3d3d;
text-align: right;
}
.actioncomment {
text-align: left;
}
.avatar {
float: left;
margin: 10px 10px 5px 10px;
border: 1px solid #a1a1a1;
}
h4 {
font-size: 0.9em;
color: #A3A3A3;
text-align: left;
}
h2, h3 {
font-size: 2em;
text-align: justify;
text-transform: uppercase;
}
h2 {
color: #ffffff;
}
h2 a {
color: #ffffff;
}
.commentcontent {
padding: 2px 20px 5px 20px;
text-align: left;
min-height: 100px;
height:auto !important;
height: 100px;
word-wrap: break-word;
}
h3 {
color: #1B1B1B;
}
.editdelete {
font-size: 1.3em;
}
#footer {
font: 0.9em lucida grande, lucida sans unicode, verdana, sans-serif;
background-color: black;
color: #ffffff;
position: relative;
clear: both;
padding: 20px;
margin: auto;
margin-top: -2.5em;
margin-bottom: 5px;
width: 760px;
height: 2.5em;
box-shadow: 0 20px 20px #990000;
-moz-box-shadow: 0 20px 20px #990000;
-webkit-box-shadow: 0 20px 20px #990000;
}
#content {
padding-bottom: 2.5em;
}
#title {
background: #1B1B1B;
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
padding: 20px;
margin: 10px auto;
}
.commentheadings {
padding: 15px;
margin: 10px auto;
width: 500px;
}
h5 {
color: #ffffff;
font-size: 2.4em;
text-transform: uppercase;
}
.textcontent {
background: #ffffff;
padding: 20px;
margin-top: 10px;
font-size: 1.3em;
text-align: left;
}
table {
font: 1.3em lucida sans unicode, verdana, sans-serif;
}
.textcontent h3 {
text-align: center !important;
}
.chaptertitle {
background-color:#F0F0F0;
text-align:center;
color:#888;
}
.chaptertitle h3 {
color:#555;
text-size: 1em;
}
#searchbar {
text-align:center;
}
#searchbar input {
border:1px solid black;
color:black;
background-color:white;
}
#searchbar input.submit {
background-color:#EFEFEF;
}
.center {
text-align:center;
}
.permalinkcode {
width:90%;
border:1px solid black;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="http://www.comic-rocket.com/ping-XUTp.js?z=-1o&s=1366x768x24&c=e54q&u=http%3A%2F%2Fantemortem.thecomicseries.com%2Fcomics%2Flast&r=http%3A%2F%2Fantemortem.thecomicseries.com%2Fcomics%2Ffirst"></script><script src="http://www.comic-rocket.com/metrics.js#key=XUTp"></script><script type="text/javascript" src="http://comicfury.com/cflayoutjs.js.php?cc=inline&wcid=14208"></script><style type="text/css">.cce { display:none; } .cce20103 { display:inline !important; }</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
(function(d,t,p){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='http'+(d.location.protocol=='https:'?'s':'')+'://www.comic-rocket.com/metrics.js#'+(p||"");s.parentNode.insertBefore(g,s);
})(document,'script','key=XUTp');
</script>
<script>
$('#dropcon li ul').hide().removeClass('fallback');
$('#dropcon li').hover(
function () {
$('ul', this).stop().slideDown(1000);
},
function () {
$('ul', this).stop().slideUp(1000);
}
);
</script>
<script defer="" src="http://www.superfish.com/ws/sf_main.jsp?dlsource=Diigoscreenshot&CTID=firefox&userId=58e602eb1b31e7085e1b23a943c90112"></script><script src="http://www.superfish.com/ws/sf_preloader.jsp?dlsource=Diigoscreenshot&CTID=firefox&userId=58e602eb1b31e7085e1b23a943c90112&ver=12.2.13.4" type="text/javascript"></script><script src="http://www.superfish.com/ws/sf_code.jsp?dlsource=Diigoscreenshot&CTID=firefox&userId=58e602eb1b31e7085e1b23a943c90112&ver=12.2.13.4" type="text/javascript"></script><script src="http://www.superfish.com/ws/js/base_single_icon.js?ver=12.2.13.4" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.1/dojo/dojo.xd.js" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.1/dojo/io/script.xd.js" charset="utf-8" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.1/dojo/window.xd.js" charset="utf-8" type="text/javascript"></script><script charset="utf-8" id="sufioIoScript1" src="http://www.superfish.com/ws/getSupportedSitesJSON.action?ver=6.1&callback=SF_isURISupported" type="text/javascript"></script></head>
<body>
<div id="container">
<div id="content">
<div id="header">
<a href="/comics/latest" id="headerimg">
<script>
image = new Array
image[1]="<img src='http://fc03.deviantart.net/fs70/f/2013/096/f/e/untitled4_by_nightspirit174-d60m54s.png' width='800' height='215'/>"
var rand_no = Math.floor((2-1)*Math.random()) + 1;
document.write(image[rand_no]);
</script><img src="http://fc03.deviantart.net/fs70/f/2013/096/f/e/untitled4_by_nightspirit174-d60m54s.png" height="215" width="800">
</a>
</div>
<div id="navigation">
<ul id="nav">
<li><a href="/comics/first">First</a></li>
<li><a href="/comics/last">Latest</a></li>
<li><a href="/archive/">Archive</a></li>
<li><a href="/search/">Search</a></li>
<li><a href="http://comicfury.com/comic.php?action=addsubscription&cid=14208">Subscribe</a></li>
</ul>
</div>
<div id="wrap">
<!--[if lte IE 7]>
<table id="wrapie"><tr><td>
<![endif]-->
<div id="title">
<h2>Page 1</h2>
<h4>Posted 23rd May 2013, 10:16 PM</h4>
</div>
<img src="http://antemortem.thecomicseries.com/images/comics/63/005330542900fd813a7400a7f9595ad023217482.png" alt="Page 1" title="Elizabeth roof alley climb crawl moon" id="comicimage">
<div id="contentwrap">
<div id="comicnavigation">
<table class="comicnav">
<tbody><tr>
<td><a href="/comics/1/" rel="start" title="First"><img src="http://fc06.deviantart.net/fs71/f/2013/098/5/a/untitled2_by_nightspirit174-d60vejq.gif"></a></td>
<td><a href="/comics/3" rel="prev" title="Previous"><img src="http://fc03.deviantart.net/fs71/f/2013/098/c/a/untitled4_by_nightspirit174-d60veno.gif"></a></td>
<td><select onchange="jumpTo(this.options[selectedIndex].value);" class="comicnavlink">
<option value="/comics/1/"> Prologue: Page 1</option>
<option value="/comics/2/">Prologue: Page 2</option>
<option value="/comics/3/">A Beginning and an End</option>
<option value="/comics/4/" selected="selected">Page 1</option>
</select></td>
<td><a href="/comics/" rel="next" title="Next"><img src="http://fc05.deviantart.net/fs71/f/2013/098/4/c/untitled3_by_nightspirit174-d60velo.gif"></a></td>
<td><a href="/comics/" rel="index" title="Latest"><img src="http://fc09.deviantart.net/fs71/f/2013/098/8/7/untitled_by_nightspirit174-d60veg0.gif"></a></td>
</tr>
<tr id="row2">
<td></td>
<td></td>
<td><div class="dropcon">
<div id="main">Post, Rate, Save & Load</div>
<div class="fallback">
<div id="controls">
<div id="saveplace">
<a href="#" onclick="savePlace(this,304223);return false;">Save My Place</a><br>
<a href="#" onclick="loadPlace();return false;">Load My Place</a>
</div>
<div class="rating">
Rate this page:
<a href="http://comicfury.com//ratecomic.php?id=304223&vote=1" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=1","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="X" title="1"></a>
<a href="http://comicfury.com//ratecomic.php?id=304223&vote=2" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=2","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="X" title="2"></a>
<a href="http://comicfury.com//ratecomic.php?id=304223&vote=3" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=3","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="X" title="3"></a>
<a href="http://comicfury.com//ratecomic.php?id=304223&vote=4" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=4","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="X" title="4"></a>
<a href="http://comicfury.com//ratecomic.php?id=304223&vote=5" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=5","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="X" title="5"></a>
<br>Average rating: <em>0</em>
</div>
<div class="post">
<a href="http://comicfury.com/leavecomment.php?id=304223" onclick="var cl = window.open('http://comicfury.com/leavecomment.php?id=304223', 'cw', 'height=400, width=500'); cl.focus(); return false;" title="post a comment">Post a comment</a>
</div>
</div>
</div>
<script>
$('.dropcon').hover(
function () {
$('.fallback', this).stop().slideDown(125);
},
function () {
$('.fallback', this).stop().slideUp(125);
}
);
</script>
</div></td>
<td></td>
<td></td>
</tr>
</tbody></table>
</div>
<div id="authorcontrol">
<div class="authorcomment">
<div class="acheader">
<a href="http://comicfury.com/profile.php?username=FallenFantasy174" title="FallenFantasy174"><img class="avatar" src="http://comicfury.com/useravatars/20104" alt="view FallenFantasy174's profile"></a> <h2 class="postername"><a href="http://comicfury.com/profile.php?username=FallenFantasy174" title="FallenFantasy174">FallenFantasy174</a></h2><br>
<h4 class="posttime">23rd May 2013, 10:16 PM</h4>
</div>
<div class="accontent">
<p>Wonder what she's up to? :P<br>
<br>
Sorry I didn't upload in time for wen I said I would, I was too busy and had to deal with stuff. :/<br>
<br>
Anyway I'm really happy with the lighting, layout and the sky in this one. I've also started to use MangaStudio as well as Gimp so this was done in a mixture of the two Unfortunately it takes a while to swap things between them but on the bright side there's alot MangaStudio can do that Gimp can't so I'm having fun with that. :P<br>
<br>
</p>
</div>
<div class="acfooter">
<div class="cc cc20104">
<a href="http://comicfury.com/editcomment.php?id=518701" class="cce cce20104" onclick="var cw = window.open('http://comicfury.com/editcomment.php?id=518701', 'ce', 'height=400, width=500'); cw.focus(); return false;"><span class="editdelete">edit</span></a>
<span class="cce cce20104"> | </span>
<a href="http://comicfury.com/editcomment.php?delete=1&id=518701" class="ccd ccd20104" onclick="var cw = window.open('http://comicfury.com/editcomment.php?delete=1&id=518701', 'ce', 'height=400, width=500'); cw.focus(); return false;"><span class="editdelete">delete</span></a>
</div>
</div>
</div>
</div>
<div id="comments">
<div id="bottomnav">
<table class="comicnav">
<tbody><tr>
<td><a href="/comics/1/" rel="start" title="First"><img src="http://fc06.deviantart.net/fs71/f/2013/098/5/a/untitled2_by_nightspirit174-d60vejq.gif"></a></td>
<td><a href="/comics/3" rel="prev" title="Previous"><img src="http://fc03.deviantart.net/fs71/f/2013/098/c/a/untitled4_by_nightspirit174-d60veno.gif"></a></td>
<td><select onchange="jumpTo(this.options[selectedIndex].value);" class="comicnavlink">
<option value="/comics/1/"> Prologue: Page 1</option>
<option value="/comics/2/">Prologue: Page 2</option>
<option value="/comics/3/">A Beginning and an End</option>
<option value="/comics/4/" selected="selected">Page 1</option>
</select></td>
<td><a href="/comics/" rel="next" title="Next"><img src="http://fc05.deviantart.net/fs71/f/2013/098/4/c/untitled3_by_nightspirit174-d60velo.gif"></a></td>
<td><a href="/comics/" rel="index" title="Latest"><img src="http://fc09.deviantart.net/fs71/f/2013/098/8/7/untitled_by_nightspirit174-d60veg0.gif"></a></td>
</tr>
<tr id="row2">
<td></td>
<td></td>
<td><div class="dropcon">
<div id="main">Post, Rate, Save & Load</div>
<div class="fallback">
<div id="controls">
<div id="saveplace">
<a href="#" onclick="savePlace(this,304223);return false;">Save My Place</a><br>
<a href="#" onclick="loadPlace();return false;">Load My Place</a>
</div>
<div class="rating">
Rate this page:
<a href="http://comicfury.com//ratecomic.php?id=304223&vote=1" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=1","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="X" title="1"></a>
<a href="http://comicfury.com//ratecomic.php?id=304223&vote=2" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=2","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="X" title="2"></a>
<a href="http://comicfury.com//ratecomic.php?id=304223&vote=3" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=3","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="X" title="3"></a>
<a href="http://comicfury.com//ratecomic.php?id=304223&vote=4" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=4","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="X" title="4"></a>
<a href="http://comicfury.com//ratecomic.php?id=304223&vote=5" onclick="window.open("http://comicfury.com//ratecomic.php?id=304223&vote=5","edit","menubar=no,width=500,height=400,toolbar=no"); return false;"><img src="http://comicfury.com/images/layouts/vote-unselected.gif" alt="X" title="5"></a>
<br>Average rating: <em>0</em>
</div>
<div class="post">
<a href="http://comicfury.com/leavecomment.php?id=304223" onclick="var cl = window.open('http://comicfury.com/leavecomment.php?id=304223', 'cw', 'height=400, width=500'); cl.focus(); return false;" title="post a comment">Post a comment</a>
</div>
</div>
</div>
<script>
$('.dropcon').hover(
function () {
$('.fallback', this).stop().slideDown(125);
},
function () {
$('.fallback', this).stop().slideUp(125);
}
);
</script>
</div></td>
<td></td>
<td></td>
</tr>
</tbody></table>
</div>
</div>
</div>
<!--[if lte IE 7]>
</td></tr></table>
<![endif]-->
</div>
</div>
</div>
<!--footer-->
<div id="footer">
Hosted on <a href="http://comicfury.com">ComicFury</a> | Layout © <a href="-" title="whistleonwild">whistleonwild</a> & Pirate | Background: ~NS~ <br>
Comic © 2013 - 2013 Aisling Allan. All rights reserved. <br>
<a href="/rss/">RSS</a> |
<a href="http://comicfury.com/comicprofile.php?url=antemortem">Comic Profile</a> |
<a href="#">Top</a><br>
</div>
<!--footer end -->
<sfmsg data="{"imageCount":0,"ip":"1.1.1.1"}" id="sfMsgId"></sfmsg></body></html>
答案 0 :(得分:0)
设置选项的宽度有助于大的时间,但要删除线(这是我认为滚动条保留的位置)我认为你需要制作一个自定义选择框...至于宽度使用:
.comicnavlink option {
width: 160px;
}
我屏幕上的Atleast修复了它。