2014-09-02 191 views
0

我有一个使用下面的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

现场演示位于http://jsfiddle.net/29fb020c/

这是什么原因导致的,以及它如何解决?

<!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> 
+0

似乎你的输入太大,536px的形式和300px的输入。复制“地图”,并没有定义哪个破坏了所有的 – Riskbreaker 2014-09-02 14:56:53

+0

@Riskbreaker你的意思是复制“地图”,没有定义? – user1032531 2014-09-02 15:22:41

+0

findOnMap'我的意思是,我将它从float右移到显示inline-block .... ....请参阅下面的回答 – Riskbreaker 2014-09-02 16:01:19

回答

3

您需要更改表单的宽度。如果你放大它,即使你缩小几次,它也不会破坏你的布局。我改变宽度为650px,并删除.findOnMap {浮动:右},它看起来很好。

+0

是的,我已经这样做了,但是,当缩小出路(不是任何人会这样做)时,它仍然破裂。 – user1032531 2014-09-02 15:23:12

+0

我试着在firefox中将宽度设置为600px,并且布局没有中断。 – tzvig 2014-09-02 15:38:17

0

你需要改变一些风格,因此将适合任何一种情况下,因为所有的浏览器略低与被确定,以便在这种情况下做出的样式去:

form {width: 600px} 

.findOnMap {display: inline-block} 

你可以在这里看到:

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

我在Chrome和FF中进行了检查并放大了它并没有中断。