Смещение фона / границ ячеек в разных браузерах - PullRequest
Новая
       0

Смещение фона / границ ячеек в разных браузерах

0 голосов
/ 20 апреля 2011

Я разработал красивую рамку стола с CSS и графикой. Он использует фрагменты фонового изображения для 3D-заголовка и простые CSS-границы для строк.

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

В IE6 и IE7 все работает нормально

В IE8 и FF3.5 левый край выходит на один пиксель

В Chrome 10 правый край выходит на один пиксель

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

Демонстрация проблемы по адресу: http://www.songtricks.com/TableBug.html

Источник HTML / CSS ниже: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>    
    <style type="text/css">

    table.demo 
    {
      margin:0px;
      padding:0px;
      border-collapse:collapse;
    }
    table.demo tr
    {
      padding:0px;
      border:none 0px transparent;
    }

    table.demo th
    {
      border:none 0px transparent;
      border-bottom:solid 1px #cccccc;      
      padding:10px;
      background:url(wfx_table_tm.gif) repeat-x left top;
    }
    table.demo th.left
    {
      padding:0px;
      background:url(wfx_table_tl.gif) no-repeat left top;
    }
    table.demo th.right
    {
      padding:0;
      background:url(wfx_table_tr.gif) no-repeat right top;
    }

    table.demo td
    {
      border:none 0px transparent;
      border-right:solid 1px #dfdfdf;
      border-bottom:solid 1px #cccccc;
      padding:8px;
    }
    table.demo td.left
    {
      border-left:solid 1px #b1b1b1;  
    }
    table.demo td.right
    {
      border-right:solid 1px #b1b1b1;  
    }

    </style>    
    </head>

    <body>
        <table class="demo">
            <tr>
                <th class="left">Left</th>
                <th>Center</th>
                <th class="right">Right</th>
            </tr><tr>
                <td class="left">Left</td>
                <td>Center</td>         
                <td class="right">Right</td>
            </tr>
        </table>    
    </body>
</html>

Ответы [ 2 ]

2 голосов
/ 20 апреля 2011

Попробуйте border-spacing:0 вместо border-collapse:collapse на уровне table.demo.

Если оно нарушает ie6 / 7, то вы можете включить смещение границы в условную ссылку CSS.

0 голосов
/ 20 апреля 2011

Ваша проблема в том, что вы используете фоновое изображение для имитации border-right для th.right. Фоновое изображение идет внутри области границы, тогда как <td> непосредственно под ним имеет реальную границу 1px; браузер создает одинаковую внутреннюю ширину <th> и <td>, чтобы выровнять столбцы, но <td> кажется на 1 пиксель шире, потому что у него реальная border-right 1 пиксель. Ваш border-collapse: collapse скрывает проблему ширины в других ячейках.

Решение - использовать фоновое изображение в качестве фонового изображения и границы для границы. Или используйте трюк с фоновым изображением, чтобы установить правую и левую границы для элементов <td>.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...