Ошибка Google Chrome с tr фона

Ответ 1

Это работает для меня во всех браузерах:

tr {
background: transparent url(/shadow-down.gif) no-repeat 0% 100%;
display: block;
position: relative;
width: 828px;
}

tr td{
background: transparent;
}

Ответ 2

В теге tr style include Style='Display:inline-table;' Он отлично работает во всех браузерах.

Ответ 3

Chrome (WebKit) переопределяет позицию: относительный для строк таблицы и вычисляет стиль для статического. Ошибка или функция - это предотвращает положение: относительное исправление, которое используется в IE7.

Решение при использовании фиксированных (известных) размеров ячеек: tr {    поплавок: левый; }

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

Мне не нужно решение для динамических размеров ячеек, поэтому я не изучал эту функцию.

Ответ 4

Что я в итоге сделал:

table.money-list tr {
background: url(images/status-2.gif) no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {

    /*Chrome CSS here*/
    table tbody tr td:first-child {
    background-image: none;
    background-color: transparent;
}

table tr td{
    background-color: #FFFFFF;
}
}

Итак, как вы можете видеть, просто установите цвет фона для каждого TD, но первый, и целевой Webkit.

Ответ 5

Ни один из обходных решений не работал у меня совершенно правильно. Вот что я закончил:

TABLE TBODY.highlight {
    background-image: url(path/image.png);
}

TABLE>* {
    float: left;
    clear: both;
}

Проверено только в Chrome и Firefox, поэтому не знаю, как это работает в IE (это не важно в моем случае), но для меня это работает безупречно!

Ответ 6

Провел два дня на этой проблеме, наконец нашел ответ здесь:

Вам нужно установить:

background-attachment: fixed;

Не знаю, почему моды удаляют этот ответ, а не на странице.

Ответ 7

Это единственное решение, о котором я знаю, без использования JavaScript. У вас есть недостаток в том, что вы указываете высоту TR и TD, потому что TR является абсолютным. Я также не уверен, как он будет вести себя в других браузерах.

<style>
    tr {
        position: absolute;
        background: url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat;
        height: 200px;
        border: 1px solid #00f;
    }
    td {
        width: 200px;
        height: 200px;
        border: 1px solid #f00;
    }
</style>

<table cellpadding="0" cellspacing="0">
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

Ответ 8

Я бы рекомендовал напрямую установить фоновое изображение для ячеек таблицы, смещая положение фона всех последующих ячеек влево, чтобы оно выглядело так, как должно. Таким образом, вам не нужно нарезать фоновое изображение.

Ответ 9

Здесь мое решение jQuery. Это для thead tr, но также должно работать и для t tr.

    $(document).ready(function () {
    // Apply <thead><tr> background row fix for Chrome/Safari (webkit)
    if ($.browser.webkit) {
        $('thead tr').each(function (i) {
            var theadWidth = $(this).width()-1;
            $(this).append('<div style="position:absolute;top:'+$(this).position().top+'px;left:'+$(this).position().left+'px;z-index:0;width:'+theadWidth+'px;height:'+($(this).height()+8)+'px;background:#2e4b83 url(th_background.jpg) no-repeat 0 0;background-size:'+theadWidth+'px 100%;"></div>');
        });
    }
});

Вы можете проверить это в Chrome/Firefox/IE9. Он должен выглядеть так же.

Ответ 10

Он должен исправить фон tr для Chrome и FF:

table.header_table tr#row_1 {    
    display:flex;
}

Ответ 11

попытайтесь добавить:

td{white-space: nowrap}

Может помочь в некоторой ситуации.