Question

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

enter image description here

但如果您使用Safari访问该页面，则会获得： enter image description here

我在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放在输入＃instructions元素下面，Chrome会这样做。但Safari将它从输入元素的顶部向下放置几个像素，就好像div.button的样式类似于position:relative; top:-20px。但是并没有那样，并且使用Safari检查器我没有看到任何可以使div.button完全置于输入＃指令之外的东西。

有谁看到这里发生了什么？

弹出窗体的完整代码：

<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 $12.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 $12.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的{{1}}包裹您的表单，并将样式display-inline添加到您已按下按钮的display:inline-block。

div

Answer 2

您正在看到与所使用的定位相关的特定于Safari的渲染问题。

解决方案：

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

我在Safari（Windows）v5.1.7及seems to work fine中测试了它。

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

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

我认为您希望隐藏#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偏移

3 个答案:

解决方案：