2013-09-12 1 views
1

У меня проблема с абсолютным позиционированием DIV над элементом таблицы. У меня есть DIV, который устанавливает абсолютную позицию и устанавливает верхнюю позицию для отображения точного места. Теперь, что произошло в браузере Chrome при масштабировании (ctrl +), позиция DIV была изменена на уровне масштабирования 125, 150, 175 ... и т. Д. Но уровень масштабирования 100,200, 300 ... (несколько из 100) отображает ту же позицию. Проблема была иной, чем кратный 100-кратным уровням, которые изменила позиция DIV. Как я могу исправить эту проблему?
Я создал образец страницы в jsfiddle. запустите страницу в хромовом браузере и увеличьте браузер (ctrl +) позиция DIV красного цвета будет изменяться, это проблема. Я действительно надеюсь, что кто-то найдет для этого решение.Проблема с Chrome Zoom: абсолютная верхняя позиция Div изменена во время масштабирования (Ctrl +)

HTML:

<table width="700px" class="custom"> 
    <tr> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     </td> 
    </tr> 
</table> 
<div> 
    <div class="apptest"> 
    </div> 
</div> 

CSS:

table 
{ 
border-collapse:collapse; 
} 
.custom tr td 
     { 
      height:20px; 
      border:1px solid; 
      background-color:White; 
     } 
     .apptest 
     { 
      height:70px; 
      width:400px; 
      position:absolute; 
      top:239px; 
      left:10px; 
      background-color:Red; 
     } 

ответ

1

Единственное, что я могу предположить, что должен поддерживать одинаковый внешний вид при увеличении, чтобы иметь свой стол и свой «apptest» DIV в том же контейнер:

<div class="container"> 
    <table class="custom">...</table> 
    <div class="apptest"></div> 
</div> 

Смотрите скрипку: http://jsfiddle.net/mJcsb/4/

Вы пользуетесь полностью запатентованным алгоритмом, хотя (алгоритм масштабирования Chrome), так что любые нерегулярности макета под масштабированием вполне возможны.

+0

Спасибо за ваш быстрый ответ. В моем случае абсолютная DIV разместила не только нижнюю часть таблицы. он помещает любой из td в таблицу. например, середина или девятый td .. см. обновленный скрипт [ссылка] (http://jsfiddle.net/mJcsb/5/) –

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