2011-08-11 126 views
2

我正尝试恢复字段集中标签和元素之间的空间并且失败。在我提供的附加抓取中,我想恢复每个新元素与场集周围的间距。对于我的生活,我似乎无法找到办法去做。它在FF位un IE8中以正常间距显示正常,它似乎是间距的两倍。如果有人能够指示我实现这一目标,我会感激不尽。由于如何减少字段集中元素之间的空间

HTML

  <fieldset> 
      <legend class="fld_company icon-right ui-state-default2 ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span>Select Company</legend> 
       <div class="formMessage">Click again to open</div> 
        <div class="fld_fld"> 
        <dl> 
         <dt> 
         <label for="BA_customer">Select a Company:</label> 
         </dt> 
         <dd> 
         <select name="BA_customer" id="BA_customer"> 
          <option SELECTED VALUE="">Select a Company</option> 
          <?php 
           do { 
           ?> 
          <option value="<?php echo $row_Recordsetcust['customer']?>"><?php echo $row_Recordsetcust['customer']?></option> 
          <?php 
            } 
            while ($row_Recordsetcust = mysql_fetch_assoc($Recordsetcust)); 
            $rows = mysql_num_rows($Recordsetcust); 
            if($rows > 0) 
            { 
            mysql_data_seek($Recordsetcust, 0); 
            $row_Recordsetcust = mysql_fetch_assoc($Recordsetcust); 
            } 
          ?> 
         </select> 
        </dd> 
        </dl> 

      <!--- displays the address and dept from the change function --> 

       <div id="BA_dept"></div> 
       <div id="BA_address"></div> 
      </fieldset> 

CSS

legend 
     { 


     background:#00C621; 
     color:#fff; 
     font:17px/21px Calibri, Arial, Helvetica, sans-serif; 
     padding:0 10px; 
     margin:-26px 0 -2px -8px; 
     font-weight:bold; 
     border:1px solid #f2f2e6; 
     border-color:#e5e5c3 #e5e5c3 #666661 #e5e5c3; 
     cursor: pointer; 

     } 



legend.fld_company 
     { 

     width: 140px; 

     } 

fieldset.action 
     { 

     background:#9da2a6; 
     border-color:#e5e5e5 #797c80 #797c80 #e5e5e5; 
     margin-top:40px; 

     } 

fieldset 
     { 

     background:#f2f2e6; 
     border:1px solid #e5e5e5; 
     border-color:#e5e5e5 #e5e5e5 #666661 #e5e5e5; 
     margin:10px 0 36px 0; 
     width:490px; 
     display:block; 
     text-height:10px; 
     } 

Reduce space between elements

回答

4

由于浏览器的默认样式,元素在不同的浏览器中呈现的方式不同,但从跨浏览器兼容性的角度来看,表单元素是最不一致的。您应该首先重置表单元素和其他相关元素的默认浏览器样式。大多数元素的边距和填充为零。例如

form, fieldset, legend, label, input{ margin: 0; padding: 0;} 

然后按照自己的方式单独重新设计每个元素的样式。

您还需要重置dl和dd的大纲和边距以及填充。试试这个..

1

这可能是DTDD标签有间隔。尝试设置他们周围的outline以查看,然后将margin和/或padding设置为0px

相关问题