輸入表單沒有在Safari

Question

正確對準我目前的網頁Here

我想樣式表單上的工作，因爲它顯示在鉻對齊。

我相信我這樣做的方式是出了公園錯的，但我的風格是工作在一切，但Safari和我想不通爲什麼

這是我使用當前的代碼....

<div> 
    <div> 
     <br /> 
      <div class="required-notice">   
       <span class="required-star">*</span><span> = Required Field</span> 
      </div> 
      <div class="loan-form-body"> 
       <div> 
        <span>First Name:</span><span class="required-star">*</span> 
       </div> 
       <div> 
        <input type="text" name="FirstName" id="firstname" class="validate required" style="width: 200px;" /> 
       </div> 
       <div> 
        <span>Email Address:</span><span class="required-star">*</span> 
       </div> 
       <div> 
        <input type="text" name="EmailAddress" id="emailaddress" class="validate required" style="width: 200px;" /> 
       </div> 
       <div> 
        <span>Address:</span><span class="required-star">*</span> 
       </div> 
       <div> 
        <input type="text" name="HomeAddress" id="HomeAddress" class="validate required" style="width: 430px;" /> 
       </div> 
       <div> 
        <div> 
         <span style="text-align: left; position: absolute; margin-left: 40%; margin-top:-21%;"> 
         Last Name: 
         <span class="required-star">*</span> 
         </span> 
        </div> 
        <div> 
         <input type="text" name="LastName" id="lastname" style="width: 200px; position: absolute; margin-left: 40%; margin-top: -18%;" /> 
        </div> 
        <div style="position: absolute; margin-left: 40%; margin-top: -14%;"> 
         Work Phone: 
        </div> 
        <div> 
         <input type="text" name="DaytimePhone" id="daytimephone" style="width: 200px; position: absolute; margin-left: 40%; margin-top: -10.7%;" /> 
        </div> 
       </div> 
       <div class="submit"> 
         <input type="submit" style="width: auto; outline: none; -webkit-appearance: none;" onclick="return validate();" class="button" data-form-type="submit" value="Get An Instant Report" /> 
       </div> 

赦免雜亂的代碼。

Answer 1

我定你的代碼一點，做了一些CSS，這裏有一個FIDDLE

<form name="loan-form" class="loan-form" action="#"> 
    <div class="required-notice">   
    <span class="required-star">*</span>= Required Field 
    </div> 
    <div class="loan-form-body"> 
    <label>First Name:<span class="required-star">*</span></label> 
    <input type="text" name="FirstName" id="firstname" class="validate required" /> 
    <label>Email Address:<span class="required-star">*</span></label> 
    <input type="text" name="EmailAddress" id="emailaddress" class="validate required" /> 
    <label>Address:<span class="required-star">*</span></label> 
    <input type="text" name="HomeAddress" id="HomeAddress" class="validate required" /> 
    <label>Last Name:<span class="required-star">*</span></label> 
    <input type="text" name="LastName" id="lastname" /> 
    <label>Work Phone:</label> 
    <input type="text" name="DaytimePhone" id="daytimephone" /> 
    <input type="submit" onclick="return validate();" class="button" data-form-type="submit" value="Get An Instant Report" /> 
    </div> 
</form> 

---

.loan-form { 
    width: 400px; 
    padding: 10px; 
    font-family: Sans-serif; 
    font-size: 16px; 
    border: 1px solid #ddd; 
} 
.loan-form label { 
    float: left; 
    clear: left; 
    width: 150px; 
} 
.loan-form input[type="text"] { 
    float: left; 
    width: 200px; 
    margin: 0 0 12px; 
    padding: 2px 4px; 
    border: 1px solid #ddd; 
    outline: none; 
    transition: box-shadow 0.2s ease-in-out; 
    -moz-transition: box-shadow 0.2s ease-in-out; 
    -webkit-transition: box-shadow 0.2s ease-in-out; 
} 
.loan-form input[type="text"]:focus { 
    box-shadow: 0 0 3px 0 #333; 
    -moz-box-shadow: 0 0 3px 0 #333; 
    -webkit-box-shadow: 0 0 3px 0 #333; 
} 
.loan-form input[type="submit"] { 
    display: block; 
    width: 160px; 
    height: 26px; 
    margin: 0 auto; 
} 
.required-notice { 
    padding: 7px; 
    margin: 0 0 15px; 
} 
.required-star { 
    vertical-align: top; 
    margin: 0 3px; 
    font-size: 12px; 
    color: red; 
} 

剛剛完成的造型由你的願望。