目前我在Firefox和Safari中遇到了设计问题。它看起来在Firefox中是正确的,但在Safari中它从顶部占用了一些空间。
如何删除多余的空格并在同一行显示我的第三个span
?
CSS:
<style type="text/css">
span#mrList { padding-right:20px;}
/* Start CSS for MR List */
.checklist {
border: 1px solid #ccc;
list-style: none;
height: 20em;
overflow: auto;
width: 26em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
border-style:none;
background-color:#FFF
}
span#mrList {
float:right;
padding:0px 160px 0px 20px;
}
.checklist label input{
width:30px;
padding-right:50px;
}
.checklist, .checklist li { margin: 0; padding-top:0px; }
.checklist label {
display: block;
padding-left: 25px;
text-indent: -25px;
font: normal normal normal 14px helvetica, Arial;
color: #888;
}
.checklist label:hover { background: #777; color: #fff; }
/* End CSS for MR List */
</style>
HTML:
<form name="message_frm" id="message_frm" method="post" action="">
<input type="hidden" name="action" value="reg" />
<span id="docFilter">MR/User :
<span id="docFilterContainer">
<select name="sel_filter2" id="sel_filter2" onchange="getFilter(this.value);">
<option value="-">Select Filter</option>
<option value="1">Segment</option>
<option value="2">Speciality</option>
<option value="3">Territory</option>
<option value="4">Zone</option>
</select>
</span>
<span id="docFilterContainer2" >
<select name="sel_filter" id="sel_filter" onchange="getFilter(this.value);">
<option value="-">Select Filter</option>
<option value="1">Segment</option>
<option value="2">Speciality</option>
<option value="3">Territory</option>
<option value="4">Zone</option>
</select>
</span>
<span id="mrList">
<ul class="checklist" style="border:1px solid #999;">
<li><label for="o1"><input id="o1" name="o1" type="checkbox" /> Aenean malesuada ante eget tellus</label></li>
<li><label for="o2"><input id="o2" name="o2" type="checkbox" /> In posuere augue id velit</label></li>
<li><label for="o3"><input id="o3" name="o3" type="checkbox" /> Nullam a dui ac augue adipiscing sodales</label></li>
<li><label for="o4"><input id="o4" name="o4" type="checkbox" /> Vivamus consectetuer ante eget urna</label></li>
<li><label for="o5"><input id="o5" name="o5" type="checkbox" /> Aliquam id felis cursus purus tri</label></li>
<li><label for="o6"><input id="o6" name="o6" type="checkbox" /> Suspendisse posuere lectus vitae velit </label></li>
<li><label for="o7"><input id="o7" name="o7" type="checkbox" /> Fusce condimentum nulla et tor</label></li>
<li><label for="o8"><input id="o8" name="o8" type="checkbox" /> Proin consequat faucibus gmi</label></li>
<li><label for="o9"><input id="o9" name="o9" type="checkbox" /> Etiam a lectus quis </label></li>
<li><label for="o10"><input id="o10" name="o10" type="checkbox" /> Pellentesque gravida </label></li>
<li><label for="o1"><input id="o1" name="o1" type="checkbox" /> Aenean malesuada ante eget tellus</label></li>
<li><label for="o2"><input id="o2" name="o2" type="checkbox" /> In posuere augue id velit</label></li>
<li><label for="o3"><input id="o3" name="o3" type="checkbox" /> Nullam a dui ac augue adipiscing sodales</label></li>
<li><label for="o4"><input id="o4" name="o4" type="checkbox" /> Vivamus consectetuer ante eget urna</label></li>
<li><label for="o5"><input id="o5" name="o5" type="checkbox" /> Aliquam id felis cursus purus tristiqu</label></li>
<li><label for="o6"><input id="o6" name="o6" type="checkbox" /> Suspendisse posuere lectus vitaet</label></li>
<li><label for="o7"><input id="o7" name="o7" type="checkbox" /> Fusce condimentum nulla et tortor.</label></li>
<li><label for="o8"><input id="o8" name="o8" type="checkbox" /> Proin consequat faucibus mi</label></li>
<li><label for="o9"><input id="o9" name="o9" type="checkbox" /> Etiam a lectus quis </label></li>
<li><label for="o10"><input id="o10" name="o10" type="checkbox" /> Pellentesque gravida </label></li>
</ul>
</span>
</span><br/><br/>
</form>
答案 0 :(得分:0)
我不确定这是否有帮助,因为它有点hacky,但您始终只能使用以下目标定位webkit浏览器:
@media screen and (-webkit-min-device-pixel-ratio:0) {
span { }
}