html - 输入表单在 Safari 中未正确对齐

Question

我目前正在处理页面 Here

我正在尝试将表单样式设置为在 chrome 中显示时对齐。

我确定我这样做的方式是错误的，但我的样式在除了 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;
}

按照您的意愿完成样式。