проблема с позицией опрокидывания в Firefox ... - PullRequest
Новая
       26

проблема с позицией опрокидывания в Firefox ...

0 голосов
/ 08 февраля 2011

Я полностью озадачен тем, почему этот контент для переноса отображается некорректно только в FireFox.

У меня есть страница, полная превью товара. Когда пользователь наводит мышью на товар, появляется какой-то информационный текст. Все стандартные вещи, и я использую для этого jQuery. Это отлично работает в Safari и Chrome, но в Firefox информация, которая исчезает (тег привязки с классом .tooltip), отображается не в том месте.

Если я зайду в таблицу стилей и установлю содержимое всплывающей подсказки с экрана display: none to display: block, оно будет правильно отображаться в Firefox.

http://www.tomcarden.net/birdy2/rollover-ts-tomcarden.net.html

Я не понимаю, как Javascript может перемещать div?

Буду очень признателен за любую помощь в этом !, спасибо

1 Ответ

0 голосов
/ 08 февраля 2011

В будущем, пожалуйста, предоставьте соответствующий код и HTML в вашем вопросе, чтобы нам не пришлось искать его на вашем сайте.

Это ваш HTML-код: 

<div id="product-11" class="product grid f-cell"> 
    <a href="/product/k-mock-prod-11" title="View k mock prod #11" class="product-a"> 
        <img class="products-img-thumb" src="img/prod-11_thumb.jpg" alt="Image of k mock prod #11" />
</a> 

    <a href="/product/k-mock-prod-11"  class="tooltip"> 
        <span class="products-page-text"> 
        K mock prod #11
        <p>Lorem ipsum dollor etc. 
        <br/>Size: 10.75"w x 9.25"d x 4.75"h</p> 
        </span> 
    </a> 
</div>

JavaScript здесь в основном не имеет значения.

Проблема, насколько я могу судить, связана с тем, как вы позиционируете свой якорь .tooltip внутри элемента .product. Вместо того, чтобы делать это так, как у вас сейчас, добавьте это к вашему .product или .grid или .f-cell классу (я не уверен, что вы в основном используете для своих продуктов div): 

position:relative;

Затем вы должны удалить объявления полей в вашем .tooltip классе и добавить это: 

position:absolute;
bottom:0;
left:0;

Дайте мне знать, если это работает.

...