Ошибка абсолютного положения Chrome CSS

Я хочу создать галерею, сгенерированную php, где каждое изображение имеет оттенки серого и становится цветным только при наведении на него мыши. По разным причинам я не хотел использовать фоновые изображения CSS, поэтому вместо этого я использовал изображения с абсолютным позиционированием. Когда курсор наводится на элемент td таблицы, изображение с абсолютным позиционированием появляется поверх серого изображения. Поскольку длина или ширина координат не определены, изображение RGB должно быть прямо поверх серого. В Firefox это именно то, что происходит, но в Chrome первое и второе изображения в каждой строке смещены влево. Последняя третья картинка работает нормально.

#main #album {
    width:100%; /* 600px */
}
#main #album  td{
    padding-bottom:20px;
    text-align:center;
}
#main #album  td img:first-child{   
    position:absolute;
    display:none;
}
#main #album  td:hover img:first-child{
    display:inline;
}
<table id="album">
<tr>
<td><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />A
<td><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />B
<td><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />C
</table>

ОБНОВЛЕНИЕ

Сброс CSS, предложенный diggersworld, решил проблему, но я также пытался использовать списки, и это тоже сработало. Вот код:

#main #albumlist {
    width:100%; 
    list-style-type:none;
}
#main #albumlist a {
    float:left;
    display:block;
    width:180px;
    height:auto;
    padding-left:20px;  
    padding-bottom:20px;
    text-align:center;
}
#main #albumlist li a:first-child{
    padding-left:0;
}
#main #albumlist a img:first-child {
    position:absolute;
    display:none;
}
#main #albumlist a:hover img:first-child {  
    display:inline;
}

<ul id="albumlist"><li>
        <a href="/img/big/dezsma01.jpg"><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />A</a>
        <a href="/img/big/dezsma01.jpg"><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />B</a>
        <a href="/img/big/dezsma01.jpg"><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />C</a>
</li></ul>

google-chrome css html-table absolute position
person nekdolan    schedule 11.01.2013    source источник
comment
Небольшой совет: использование списка было бы более семантическим подходом к перечислению изображений в вашем альбоме. Таблицы должны использоваться только для табличных данных.   -  person diggersworld    schedule 12.01.2013
comment
Раньше в конце 90-х у нас были такие вещи, называемые наведением мыши или ролловером, которые использовали JavaScript для замены одного изображения другим при наведении на него курсора мыши. Прямо сейчас у вас есть избыточный контент, который не имеет никакого смысла, если удалить стиль. Использование наведения мыши в стиле JS намного более уместно, чем встраивание 2 изображений таким образом.   -  person cimmanon    schedule 12.01.2013
comment
diggersworld это только первая строка таблицы 3x3, которую я показываю. cimanon Это не решит проблему, если я не изменю значение src напрямую. Что, конечно, хорошо, хотя таким образом мне не нужно предварительно загружать изображения с помощью javascript, и мне вообще не нужно выполнять какие-либо манипуляции с DOM.   -  person nekdolan    schedule 12.01.2013
comment
@nekdolan это на самом деле не имеет значения.   -  person diggersworld    schedule 12.01.2013
comment
@diggersworld хорошо, я попробую посмотреть, будет ли он вести себя по-другому. Мне не очень нравятся горизонтальные списки.. может быть, мне вообще не нужно идти по горизонтали...   -  person nekdolan    schedule 12.01.2013

Ответы (1)


arrow_upward
0
arrow_downward

Разница в поведении может быть связана со многими вещами. Обычно основной проблемой является разница между стилями браузера по умолчанию, поскольку все они имеют набор определенных пресетов. Эти пресеты можно легко переопределить с помощью таблицы стилей сброса. Это в основном сбрасывает все атрибуты CSS до базовой отправной точки и обеспечивает основу уровня для всех браузеров.

http://meyerweb.com/eric/tools/css/reset/

Я упомянул в комментарии, что использование таблицы не является идеальным решением. Таблицы обычно использовались в 90-х годах для макета. Однако с тех пор CSS стал более полезным и позволяет разработчикам достигать гораздо большего с меньшим количеством HTML.

Вы определенно должны овладеть искусством использования списков. Они, как правило, являются одним из элементов, которые я чаще всего использую при разработке веб-сайтов. Вы будете удивлены, узнав, сколько вещей на самом деле являются списками, если вы разберете их семантически. Они также намного более гибкие, чем таблицы, и вы увидите огромную выгоду, если когда-нибудь погрузитесь в адаптивный веб-дизайн.

person diggersworld    schedule 11.01.2013
comment
Спасибо, это сработало. Также пробовал списки (см. первый пост) и это работает без сброса. Если я правильно помню, элементы с абсолютным позиционированием - если координаты не установлены - должны быть расположены точно в том же месте, где они были бы расположены, если бы элемент не был удален из потока. Так что это ошибка, даже если сброс решает ее. - person nekdolan; 12.01.2013