Firefox 和 Firefox 中的设计问题狩猎之旅

Question

目前我在 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>

Answer 1

我不确定这是否有帮助，因为它有点 hacky，但你始终只能使用以下方法来定位 webkit 浏览器：

@media screen and (-webkit-min-device-pixel-ratio:0) {


 span {  }

}