javascript - 最后两个字段集之间的奇怪差距

Question

当我在另一个字段集下方使用一个字段集时，我得到了一个奇怪的差距，但这不在我的代码中......

这是CSS：

fieldset { overflow:hidden }
.some-class { float:left; clear:none; }
.some-class1 { float:left; clear:none; }
.some-class2 { float:left; clear:none; }
.someclass { float:left; clear:none; }
.someclass1 { float:left; clear:none; }

这里的html：

<fieldset>
  <div class="some-class">
             <input type="button" value="AAN" style="float:left" onclick="POI(this)" />

    <input type="button" value="UIT" style="float:left" onclick="POI(this)" />
   <span>Spoortoegang </span>

 </div>
</fieldset>
<fieldset>
  <div class="someclass">
                 <input type="button" value="AAN" style="float:left" onclick="Storingen(this)" />

         <input type="button" value="UIT" style="float:left" onclick="Storingen(this)" />
  <span>Storingen</span>
 </div>
</fieldset>

<fieldset>
  <div class="Tekeningen-class">
             <input type="button" value="AAN" style="float:left" onclick="Tekeningen(this)" />

    <input type="button" value="UIT" style="float:left" onclick="Tekeningen(this)" />
   <span>Tekeningen</span>

 </div>
</fieldset>

<fieldset>
  <div class="someclass1">
                   <input type="button" value="AAN" style="float:left" onclick="Ultrasoon(this)" />
<input type="button" value="UIT" style="float:left;" onclick="Ultrasoon(this)" />
  <span>Ultrasoon Rapporten</span>
 </div>
 </fieldset>

   <fieldset>
  <div class="some-class2">
                   <input type="button" value="AAN" style="float:left" onclick="Medewerkers(this)" />
<input type="button" value="UIT" style="float:left;" onclick="Medewerkers(this)" />
  <span>Medewerkers</span>
 </div>
</fieldset>​
 <fieldset style="margin:0px; padding 0px;">

 <ul class="dropdown">
 <div id="some-class1"">
    <li><a id="drivers" onclick="dropdown(this); return false;" class="dir" style="font size=18"">IRISSYS Data &#9660;</a>
        <ul id="driversmenu" class="sub" >
<fieldset style="background-color:#c5ccd3">            
            <li><a>  <div class="someclass">
                   <input type="button" value="AAN" style="float:left" onclick="irisvoertuig(this)" />
<input type="button" value="UIT" style="float:left;" onclick="irisvoertuig(this)" />
  <span>Voertuig Effect</span></a></li>
</fieldset>

<fieldset style="background-color:#c5ccd3">            
            <li><a>  <div class="someclass">
                   <input type="button" value="AAN" style="float:left" onclick="iriscombinatie(this)" />
<input type="button" value="UIT" style="float:left;" onclick="iriscombinatie(this)" />
  <span>Combinatie Parameter</span></a></li>
</fieldset>

<fieldset style="background-color:#c5ccd3">            
            <li><a>  <div class="someclass">
                   <input type="button" value="AAN" style="float:left" onclick="irishoogte(this)" />
<input type="button" value="UIT" style="float:left;" onclick="irishoogte(this)" />
  <span>Hoogte</span></a></li>
</fieldset>

<fieldset style="background-color:#c5ccd3">            
            <li><a>  <div class="someclass">
                   <input type="button" value="AAN" style="float:left" onclick="irisschift(this)" />
<input type="button" value="UIT" style="float:left;" onclick="irisschift(this)" />
  <span>Schift</span></a></li>
</fieldset>

<fieldset style="background-color:#c5ccd3">            
            <li><a>  <div class="someclass">
                   <input type="button" value="AAN" style="float:left" onclick="irisverkanting(this)" />
<input type="button" value="UIT" style="float:left;" onclick="irisverkanting(this)" />
  <span>Verkanting verschil</span></a></li>
</fieldset>

<fieldset style="background-color:#c5ccd3">            
            <li><a>  <div class="someclass">
                   <input type="button" value="AAN" style="float:left" onclick="irisspoorwijdte(this)" />
<input type="button" value="UIT" style="float:left;" onclick="irisspoorwijdte(this)" />
  <span>Spoorwijdte Verloop</span></a></li>
</fieldset>

<fieldset style="background-color:#c5ccd3">            
            <li><a>  <div class="someclass">
                   <input type="button" value="AAN" style="float:left" onclick="irisspoorstaaf(this)" />
<input type="button" value="UIT" style="float:left;" onclick="irisspoortaaf(this)" />
  <span>Spoorstaaf Slijtage</span></a></li>
</fieldset>
<fieldset style="background-color:#c5ccd3">            
            <li><a>  <div class="someclass">
                   <input type="button" value="AAN" style="float:left" onclick="irissporen(this)" />
<input type="button" value="UIT" style="float:left;" onclick="irissporen(this)" />
  <span>IRISSYS Sporen</span></a></li>
</fieldset>

       </ul>
    </li>
        <div>

    </ul>
  </fieldset>

在 chrome 的元素检查器中，我得到了这个：

有谁知道我做错了什么？您的帮助将不胜感激。

提前致谢

Answer 1

回答：

在字段集之间有一个不可见的字符，被一些渲染为红点的人看到。

​

删除它，您的问题就会消失。

http://jsfiddle.net/hsRSD/1/或在您的 jsFiddle 中删除：http: //jsfiddle.net/KPTXR/1/

我删除了另一部分以便于查找。

 <fieldset>
    <span>Medewerkers</span>
 </fieldset>​  <-- It is here, but only seen in jsFiddle
 <fieldset style="margin:0px; padding 0px;">


  </fieldset>

建议：

然后在您的代码中，双引号存在一些问题：

 style="font size=18""   <-- remove the duplicate

（实际上 CSS 是font-size: 18px）

然后注意不要对其他元素进行嵌套 UL。我可以说出许多问题来自于直接在 UL 下拥有除 LI 之外的其他元素。

 <ul id="driversmenu" class="sub" >
     <fieldset style="background-color:#c5ccd3">      <-- THIS will likely cause problems!    
        <li><a>  <div class="someclass">
            <input type="button" value="AAN" style="float:left" onclick="irisvoertuig(this)" />
            <input type="button" value="UIT" style="float:left;" onclick="irisvoertuig(this)" />
            <span>Voertuig Effect</span></a>
        </li>
     </fieldset>

如果您必须将字段集放在 LI 之后：

  <ul id="driversmenu" class="sub" >
     <li>
        <fieldset style="background-color:#c5ccd3">          
        <a> <-- what does this do?
          <div class="someclass">
            <input type="button" value="AAN" style="float:left" onclick="irisvoertuig(this)" />
            <input type="button" value="UIT" style="float:left;" onclick="irisvoertuig(this)" />
            <span>Voertuig Effect</span></a>
        </fieldset>
     </li>

​ ​</p>