Border-image и CSS-изображение не выстраиваются только в Firefox - PullRequest
Новая
       45

Border-image и CSS-изображение не выстраиваются только в Firefox

0 голосов
/ 06 февраля 2012

У меня есть таблица, в которой все ячейки имеют верхнюю границу 1px, кроме первого столбца, в котором есть фоновое изображение для репликации нижней границы 1px (граница исчезает влево).Во всех браузерах (Chrome, Safari, IE6 +) «поддельная граница» совпадает с «реальной границей» - за исключением Firefox, где поддельная граница 1px слишком мала.Если я вручную переместу изображение на 1 пиксель вверх, оно полностью исчезнет.

Я предполагаю, что Firefox по-разному обрабатывает лишнюю границу в 1 пиксель.Если есть ячейка с рамкой рядом с ячейкой без рамки, Firefox, похоже, оставляет место, где должна быть граница, тогда как другие браузеры расширяют ячейку без рамки на 1 пиксель, поэтому мои изображения могут занимать это место.(Надеюсь, это имеет смысл!)

Кто-нибудь знает, как исправить это?

Рабочий пример: http://resonantmind.net/temp/compare.php

1 Ответ

0 голосов
/ 07 февраля 2012

1. Я тоже попробовал -1px, но установил высоту 50px.Не совсем то, что вы хотите, но, кажется, на правильном пути.

.compare .item {
    background:#fcfcfc url(bg-compare-item.gif) no-repeat 0 -1px;
    height:50px;

    /* original */
    text-align:left; line-height:29px !important; border:0;
}

2. Другим решением является смещение верхней линии изображения на 1 пиксель вниз и полное удаление нижней строки.Затем введите -1px в CSS, и вы получите желаемый результат.Хорошо выглядит в Chome, IE9 и Firefox.

...