Firefox瀏覽器縮放對CSS佈局的影響

我有一個使用下面的HTML/CSS的窗體。它看起來像：Firefox瀏覽器縮放對CSS佈局的影響

enter image description here

換成Firefox瀏覽31，如果我縮小（https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages），它看起來像：

enter image description here

這是什麼原因導致的，以及它如何解決？

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Form Test</title> 
     <style type="text/css"> 
      html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
       background: none repeat scroll 0 0 transparent; 
       border: 0 none; 
       font-size: 100%; 
       margin: 0; 
       outline: 0 none; 
       padding: 0; 
       vertical-align: baseline; 
      } 

      div.form-input, div.form-select { 
       padding: 2px; 
      } 

      label.forInput { 
       width: 200px; 
       clear: both; 
       float: left; 
       font-size: 11px; 
       font-weight: bolder; 
      } 

      input, select { 
       width: 300px; 
      } 

      .findOnMap { 
       float: right; 
      } 
      form { 
       width: 536px; 
      } 

     </style> 
    </head> 
    <body> 
     <form class="dialog-form" id="addAccount" method="post" novalidate="novalidate"> 
      <div class="form-input"> 
       <label for="name" class="forInput">Name:</label> 
       <input type="text" id="name" name="name" aria-required="true"> 
      </div> 
      <div class="form-input"> 
       <label for="address" class="forInput">Street Address:</label> 
       <input type="text" value="" id="address" name="address" autocomplete="off" placeholder="Enter a location"> 
       <a href="javascript:void(0)" class="findOnMap">map</a> 
      </div> 
      <div class="form-input"> 
       <label for="city" class="forInput">City:</label> 
       <input type="text" value="" id="city" name="city"> 
      </div> 
      <div class="form-input"> 
       <label for="state" class="forInput">State:</label> 
       <input type="text" value="" id="state" name="state"> 
      </div> 
     </form> 
    </body> 
</html>

來源

2014-09-02 user1032531

似乎你的輸入太大，536px的形式和300px的輸入。複製「地圖」，並沒有定義哪個破壞了所有的 – Riskbreaker 2014-09-02 14:56:53

@Riskbreaker你的意思是複製「地圖」，沒有定義？ – user1032531 2014-09-02 15:22:41

findOnMap'我的意思是，我將它從float右移到顯示inline-block .... ....請參閱下面的回答 – Riskbreaker 2014-09-02 16:01:19

您需要更改表單的寬度。如果你放大它，即使你縮小几次，它也不會破壞你的佈局。我改變寬度爲650px，並刪除.findOnMap {浮動：右}，它看起來很好。

來源

2014-09-02 15:06:07 tzvig

是的，我已經這樣做了，但是，當縮小出路（不是任何人會這樣做）時，它仍然破裂。 – user1032531 2014-09-02 15:23:12

我試着在firefox中將寬度設置爲600px，並且佈局沒有中斷。 – tzvig 2014-09-02 15:38:17

你需要改變一些風格，因此將適合任何一種情況下，因爲所有的瀏覽器略低與被確定，以便在這種情況下做出的樣式去：

form {width: 600px} 

.findOnMap {display: inline-block}

你可以在這裏看到：

http://jsfiddle.net/29fb020c/10/

我在Chrome和FF中進行了檢查並放大了它並沒有中斷。

來源

2014-09-02 15:59:26 Riskbreaker

Firefox瀏覽器縮放對CSS佈局的影響

回答

相關問題