2010-07-14 93 views
1

經與IE6的一些討厭的問題和閱讀我的股利形式佈局,HTML:IE6形式/ DIV浮動問題

<form id="brochureForm" name="brochureForm" action="/how-it-works/request-a-brochure/" method="post"> 
     <div class="row"> 
      <div class="label"> 
       <label for="szName">Name</label> 
      </div> 
      <div class="field"> 
       <input type="text" name="szName" id="szName" value="#form.szName#" /> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="row"> 
      <div class="label"> 
       <label for="szCompanyName">Company Name</label> 
      </div> 
      <div class="field"> 
       <input type="text" name="szCompanyName" id="szCompanyName" value="#form.szCompanyName#" /> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="row"> 
      <div class="label"> 
       <label for="szAddress">Address</label> 
      </div> 
      <div class="field"> 
       <input type="text" name="szAddress" id="szAddress" value="#form.szAddress#" /> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="row"> 
      <div class="label"> 
       <label for="szTown">Town/City</label> 
      </div> 
      <div class="field"> 
       <input type="text" name="szTown" id="szTown" value="#form.szTown#" /> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="row"> 
      <div class="label"> 
       <label for="szPostcode">Postcode</label> 
      </div> 
      <div class="field"> 
       <input type="text" name="szPostcode" id="szPostcode" value="#form.szPostcode#" /> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="row"> 
      <div class="label"> 
       <label for="szTelephone">Tel</label> 
      </div> 
      <div class="field"> 
       <input type="text" name="szTelephone" id="szTelephone" value="#form.szTelephone#" /> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="row"> 
      <div class="label"> 
       <label for="szEmail">E-mail</label> 
      </div> 
      <div class="field"> 
       <input type="text" name="szEmail" id="szEmail" value="#form.szEmail#" /> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="submitrow"> 
      <input type="image" name="szSubmit" id="szSubmit" src="/images/form/submit.gif" class="submitRO" /> 
     </div> 
    </form> 

然後是CSS:

.row {width:314px;margin:0 0 8px 0;} 
.row .label {width:103px;padding:3px 16px 0 0;float:left;text-align:right;} 
.row .field {width:195px;float:left;} 
.submitrow {width:314px;text-align:right;padding:3px 0 0 0;} 

結果可以在這裏顯示:

http://yfrog.com/ccieisshitej

在IE8做工精細/ 7火狐等任何提示會是app reciated!

回答

1

此外,作爲一個經驗法則與IE6打交道時,嘗試添加display:inline您浮動的div

+1

得到成功的治療(與保證金一起玩的,愚蠢的IE6的3px的bug) – 2010-07-15 15:50:49

0

IE6有時不會得到利潤和填充權。嘗試減少他們幾個像素。