Почему divs перемещаются при масштабировании браузера?

Когда я уменьшаю масштаб в моем браузере, Chrome, info_table перемещается вниз. Почему он это делает? Также при добавлении overflow: auto; в section он также перемещается. Что я могу сделать?Почему divs перемещаются при масштабировании браузера?

Jsfiddle http://jsfiddle.net/PbwS8/3/

CSS

*{ 
    font-size:100%; 
    margin: 0px; 
    padding: 0px; 
} 

body{ 
    width: 100%; 
} 

#info_table{ 
    float: left; 
    width: 480px; 
    margin: 40px 0px 0px 16px; 
    border-spacing: 0px 0px; 
} 

#left{ 
    float:left; 
    margin: 60px 0px; 
} 

#photo{ 
    float: left; 
    width: 176px; 
    height: 176px; 
    border: 1px solid black; 
} 

#section{ 
    margin: 160px auto 0px; 
    width: 675.2px; 
    height: 320px; 
    #overflow: auto; 
    #border:1px solid black; 
} 

#choosephoto{ 
    width: 64px; 
} 

#submitwords{ 
    width: 72px; 
    height: 28px; 
    margin-left: 104px; 
    #border:1px solid purple; 
} 


#wrapper{ 
    display: block; 
    box-shadow: 3px 10px 5px #888888; 
    margin: 0px auto; 
    margin-top: 48px; 
    width: 1024px; 
    height: 960px; 
    overflow: auto; 
    background:white; 
}

HTML

<div id="section"> 
      <body> 
      </body> 
      <form> 
       <div id="left"> 
        <div id="photo"> 

        </div> 
        <br/> 
        <input type="file" id="choosephoto" name="uploadphoto"/> 
       </div> 
       <table id="info_table"> 
        <tr> 
         <td>Name:</td> 
        </tr> 
        <tr> 
         <td><input/></td> 
        </tr> 
        <tr> 
         <td>Info:</td> 
        </tr> 
        <tr> 
         <td><textarea></textarea></td> 
        </tr> 
        <tr> 
         <td><button type="submit" id="submitwords">Update</button></td> 
        </tr> 
       </table> 
      </form> 
     </div>

источник

2013-06-18 user2127833

[Lucky guess] (http://jsfiddle.net/p44Zj/): возможно, из-за границы 1px и некоторых проблем округления на разных уровнях масштабирования? – Jeroen

Поиск в консоли разработчика в Chrome показывает, что граница фактически изменяется на '# photo' от 1.5015px до 2px, что добавляет ширину к ее контейнеру и (я полагаю), нажимая ваше информационное окно. – JustcallmeDrago

@JustcallmeDrago Спасибо, это было из-за границы на фотографии. – user2127833

Что касается того, что происходит: Похоже, что браузер компенсирует уровень масштабирования путем изменения ширины границ на #photo.

67% Увеличение:

enter image description here

50% Zoom:

enter image description here

касается того, как это исправить? Если не удается масштабировать, как это очень необходимо, я бы не стал беспокоиться об этом, потому что много работы, чтобы убедиться, что все масштабируется правильно.

источник

2013-06-18 20:25:35 JustcallmeDrago

Yup лучший ответ спасибо. Я не знал об этом в браузерах. – user2127833

Это происходит потому, что width для info_table установлен слишком широки для sectionwidth.

Например, уменьшение ширины в info_table облегчит это. Поэтому вы можете попробовать заменить его следующим.

#info_table{ 
    float: left; 
    width: 460px; 
    margin: 40px 0px 0px 16px; 
    border-spacing: 0px 0px; 
}

Сказав, что, было бы лучше, чтобы читать на использовании системы сетки (например, 960.gs).

источник

2013-06-18 20:20:10 redditor

Почему у вас есть тег тела внутри? Ваш код бардак, я вновь пишу это для вас here

источник

2013-06-18 20:24:39 user2212773

Почему divs перемещаются при масштабировании браузера?

ответ

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