Соответствует ли Chrome спецификациям таблиц CSS? - PullRequest
Новая
       11

Соответствует ли Chrome спецификациям таблиц CSS?

0 голосов
/ 17 августа 2011

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

В любом случае, таблицы отлично выглядят в IE8 иFirefox и оформлены именно так, как я ожидал.Тем не менее, таблица выглядит ужасно в Chrome.Не поймите меня неправильно, Chrome - отличный браузер, и то, что я обычно использую;однако в конкретном аспекте этого может не хватать.

Итак, в основном я спрашиваю: есть ли у Chrome проблемы с CSS и таблицами или я просто слаб в CSS (в то время как IE и Firefox правильно предвидели мою слабость)?

ОБНОВЛЕНИЕ: проблема в том, что таблица (установленная на ширину: 100%) перегружает свой родительский контейнер, у которого есть граница, чтобы все было полностью.Кроме того, в строке пейджера внизу свойство border top установлено на «пунктир», но на одном из столбцов оно сплошное!? 

/*-------------Grid------------*/
table.grid
{
    width: 100%;
}

.grid tr th
{
    background-color: #696969;
    background-image: url('/Images/grid-bg.png');
    color: White;
    height: 20px;
    padding: 3px;
    text-align: left;
}

.grid td, .grid th
{
    border-right: 1px solid white;
}

.grid th a:hover, .grid th a:link
{
    color: White;
    text-decoration: none;
    display:inline-block;
    width: 100%;
    height: 100%;
}

.grid th a:hover
{
    background-color: #696969;
}

.grid tr.even
{
    background-color: #EBF2FC;
}

div.grid
{
    border: 1px solid #5D7FA6;
    padding: 1px 0px 1px 1px;
}

.pager
{
    border-top:  1px dotted #5D7FA6;
}

.data-row
{
    height: 24px;
}

.grid tr.data-row:hover
{
    color:White;
    background-color: #5D7FA6;
}

1 Ответ

0 голосов
/ 17 августа 2011

Все еще сложно сказать, что именно нужно изменить, не видя тестовый пример .

Однако .. попробуйте box-sizing: border-box.См .: https://developer.mozilla.org/en/CSS/box-sizing

Добавьте это к что-то (table.grid? div.grid?): 

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
...