Эффект браузера браузера 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

видеодемонстрация расположена в 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>

источник

2014-09-02 user1032531

Похоже, что ваш вход слишком велик и имеет форму 536px и вход 300px. Копия «карта», не определяет, какой ее ломать все – Riskbreaker

@Riskbreaker Что значит под копией «карта», не определяется? – user1032531

findOnMap 'Я имел в виду, и я изменил это с float справа, чтобы отобразить встроенный блок .... см. Ответ ниже – Riskbreaker

Вам необходимо изменить ширину формы. Если вы увеличите его, даже если вы уменьшите масштаб несколько раз, он не испортит ваш макет. Я изменил ширину на 650 пикселей и удалил .findOnMap {float: right}, и все выглядит отлично.

источник

2014-09-02 15:06:07 tzvig

Да, я сделал это, однако, когда вы выбрали путь (не то, чтобы кто-нибудь это сделал), он все равно сломался. – user1032531

Я пробовал масштабирование полностью в firefox с шириной, установленной на 600 пикселей, и макет не сломался. – tzvig

Вы должны изменить некоторые стили, так что это будет соответствовать либо случаю, так как все браузеры slighty идут со стилем, который определяется так что в этом случае сделать:

form {width: 600px} 

.findOnMap {display: inline-block}

Вы можете увидеть здесь:

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

Я проверил в Chrome и FF и увеличил его, и он не сломался.

источник

2014-09-02 15:59:26 Riskbreaker

Эффект браузера браузера Firefox на CSS-макете

ответ

Смежные вопросы