Safari 导致意外 div 偏移

Question

我在 http://zackelx.com/50/SO_a9.html 有一个带有“购买”按钮的页面。当您使用 Chrome 转到页面并单击按钮时，会出现一个结帐表单，其中蓝色支付按钮正确位于最后一个输入字段下方：

但是，如果您使用 Safari 访问该页面，您会得到：

我在 Windows 7 机器上使用 Safari 5.1.7。

付款按钮周围结帐表单的 HTML 是：

  <label id="instr">instr</label>
      <input type="text" id="instructions" placeholder="size, color, etc."/><br />

      <div class="button">
          <div class="inner">
              <button type="submit">
                  <span class="pay_amount">123</span>
              </button>
          </div>
      </div>

浏览器应将 div.button 放在 input#instructions 元素下方，Chrome 会这样做。但是 Safari 将它放置在距输入元素顶部向下几个像素的位置，就好像 div.button 具有类似于 position:relative; top:-20px 的样式。但是没有那样的东西，并且使用 Safari 检查器我没有看到任何可以阻止 div.button 完全放置在 input#instructions.

下的东西

有人看到这里发生了什么吗？

弹出表单的完整代码：

<form action="" method="POST" id="checkout_form" autocomplete="off">

      <label id="state">state</label>
      <input type="text" size="20" id="checkout_form_state" class="state generic" placeholder="NY" autocomplete="" required=""><br>

      <label id="cc">cc#</label>
      <input type="text" size="20" id="checkout_form_cc_number" class="cc-number" x-autocompletetype="cc-number" required=""><br>

      <label id="exp">exp</label>
      <input type="text" id="checkout_form_cc_exp" class="cc-exp" x-autocompletetype="cc-exp" placeholder="MM/YY" required="" maxlength="9">

      <label id="CVC">cvc</label>
      <input type="text" class="cc-cvc" x-autocompletetype="cc-csc" placeholder="CVC" required="" maxlength="4" autocomplete=""><br>

      <label id="instr">instr</label>
      <input type="text" id="instructions" placeholder="black"><br>

      <div class="button">
           <div class="inner">
             <button type="submit">
                   <span class="pay_amount">Pay .00</span>
             </button>
           </div>
      </div>

      <img id="padlock" src="https://zackel.com/images/padlock_30.jpg" alt="padlock">
      <img id="creditcards" src="https://zackel.com/images/creditcards.jpg" alt="creditcards">
      <div id="validation"></div>
</form>

css:

#checkout_form {
    position: relative;
    top: 24px;
    left: 43px;
    width: 224px;
    display: inline;
}

Answer 1

您有表单元素的样式

#checkout_form {
position: relative;
top: 24px;
left: 43px;
width: 224px;
display: inline;
}

display:inline; 是导致问题的原因，并使按钮看起来像是浮动的。并没有在 safari 中正确呈现。我不知道 safari 中问题的原因，但我有一个可行的解决方法（我在您的网站上试过，它在 chrome 和 safari 上完美运行）。

稍微更改一下您的标记，在表单内添加一个 div 标记，以仅包含标签和输入，但不包含您要在下一行呈现的按钮。

<form action="" method="POST" id="checkout_form" autocomplete="off">
    <div style="display: inline;">
          <label id="email">email</label> 
          <input type="email" size="20" id="checkout_form_email" class="email generic" placeholder="john@comcast.net" required="" autocomplete=""><br>

          <label id="phone">phone</label>
          <input type="text" size="20" id="checkout_form_phone" class="phone generic" placeholder="(209) 322-6046" autocomple="" required=""><br>

          <label id="name">name</label>
          <input type="text" size="20" id="checkout_form_name" class="name generic" placeholder="John Doe" autocomplete="" required=""><br>

          <label id="street">street</label>
          <input type="text" size="20" id="checkout_form_street" class="street generic" placeholder="123 Maple St." autocomplete="" required=""><br>

          <label id="city">city</label>
          <input type="text" size="20" id="checkout_form_city" class="city generic" placeholder="San Jose" autocomplete="" required=""><br>

          <label id="state">state</label>
          <input type="text" size="20" id="checkout_form_state" class="state generic" placeholder="NY" autocomplete="" required=""><br>

          <label id="cc">cc#</label>
          <input type="text" size="20" id="checkout_form_cc_number" class="cc-number" x-autocompletetype="cc-number" required=""><br>

          <label id="exp">exp</label>
          <input type="text" id="checkout_form_cc_exp" class="cc-exp" x-autocompletetype="cc-exp" placeholder="MM/YY" required="" maxlength="9">

          <label id="CVC">cvc</label>
          <input type="text" class="cc-cvc" x-autocompletetype="cc-csc" placeholder="CVC" required="" maxlength="4" autocomplete=""><br>

          <label id="instr">instr</label>
          <input type="text" id="instructions" placeholder="black"><br>
     </div>
          <div class="button" style="display: inline-block;">
               <div class="inner">
                 <button type="submit">
                       <span class="pay_amount">Pay .00</span>
                 </button>
               </div>
          </div>

          <img id="padlock" src="https://zackel.com/images/padlock_30.jpg" alt="padlock">
          <img id="creditcards" src="https://zackel.com/images/creditcards.jpg" alt="creditcards">
          <div id="validation"></div>

    </form>

我已经用 div 样式 display-inline 包装了您的表单，并向包裹按钮的 div 添加样式 display:inline-block。

<div class="button" style="display: inline-block;">
                   <div class="inner">
                     <button type="submit">
                           <span class="pay_amount">Pay .00</span>
                     </button>
                   </div>
 </div>

Answer 2

您看到与所用定位相关的 Safari 特定呈现问题。

解决方案：

您无需更改任何 HTML，只需通过将以下 CSS 放在样式表的末尾来覆盖 CSS：

我在 Safari (Windows) v5.1.7 中测试过，seems to work fine.

对于#checkout_form元素，top: auto/left: auto用于重置之前使用的定位。我给元素设置了 100% 的宽度，并使用 padding 来定位元素。 box-sizing: border-box 用于在元素的宽度计算中包含 padding。供应商前缀用于支持较旧的浏览器（-webkit- 在 Safari 的情况下）。

对于父级按钮包装元素和信用卡图像，margin: 10px 0 0 50px 主要用于替换该元素并将其居中放置在字段元素下方。值得指出的是，父 #checkout_form 元素上的 text-align: center 被用来使元素居中。

我假设您希望隐藏 #padlock 元素，因此 display: none.

#checkout_form {
  top: auto;
  left: auto;
  width: 100%;
  display: block;
  padding: 25px 38px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}
#checkout_form .button,
img#creditcards {
  margin: 10px 0 0 50px;
}
#checkout_form .button button {
  position: static;
}
#checkout_form img#padlock {
  display: none;
}

Answer 3

remove the position relative css properties and add margin in your css.

**Previous code:** 

#checkout_form button {
    /* position:relative; */
    /* top:9px; */
    /* left:71px; */

    height:34px;
    width:180px;
/*  background-image:linear-gradient(#47baf5,#2378b3);  */
    border:none;
    border-radius: 6px;
    /* blue gradient */
    background: #17b4e8;
    background: -moz-linear-gradient(#47baf5,#2378b3);
    background: -webkit-linear-gradient(#47baf5,#2378b3);
    background: -o-linear-gradient(#47baf5,#2378b3);
    background: -ms-linear-gradient(#47baf5,#2378b3);/*For IE10*/
    background: linear-gradient(#47baf5,#2378b3);

}

**New css:**

#checkout_form button {


    height:34px;
    width:180px;
/*  background-image:linear-gradient(#47baf5,#2378b3);  */
    border:none;
    border-radius: 6px;
    /* blue gradient */
    background: #17b4e8;
    background: -moz-linear-gradient(#47baf5,#2378b3);
    background: -webkit-linear-gradient(#47baf5,#2378b3);
    background: -o-linear-gradient(#47baf5,#2378b3);
    background: -ms-linear-gradient(#47baf5,#2378b3);/*For IE10*/
    background: linear-gradient(#47baf5,#2378b3);
    margin: 9px 0 0 71px;
}

Safari 导致意外 div 偏移

Safari causing unexpected div offset

html

safari

解决方案：