Круглый угол CSS на краях таблицы Проблема в режиме документа Стандарты IE7 - PullRequest
Новая
       11

Круглый угол CSS на краях таблицы Проблема в режиме документа Стандарты IE7

0 голосов
/ 04 марта 2012

У меня простой вопрос относительно фонового изображения CSS. Я намеревался использовать изображение для отображения закругленного угла на краях таблицы (без использования свойства border-radius). 

<style type="text/css">
    .top
    {
        background-repeat:repeat;
        vertical-align:top;
    }

    .left
    {
        text-align:left;
    }

    .middle
    {
    }

    .right
    {
        text-align:right;
    }

    .bottomLeft
    {
        vertical-align:bottom;
    }

    .bottom
    {
        background-repeat:repeat;
        vertical-align:bottom;
    }

    .bottomRight
    {
        vertical-align:bottom;
    }
</style>

<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td class="topLeft">
            <img height="16px" src="Images/greenTL.gif" style="vertical-align:bottom" />
        </td>
        <td class="top">
            <img height="4px" width="100%" src="Images/greenT.gif" style="vertical-align:8px" />
        </td>
        <td class="topRight">
            <img height="16px" src="Images/greenTR.gif" style="vertical-align:bottom" />
        </td>
    </tr>
    <tr>
        <td class="left">
            <img height="100%" src="Images/greenL.gif"/>
        </td>
        <td class="middle">
        </td>
        <td class="right">
            <img height="100%" src="Images/greenR.gif"/>
        </td>
    </tr>
    <tr>
        <td class="bottomLeft">
            <img height="16px" src="Images/greenBL.gif" style="vertical-align:top" />
        </td>
        <td class="bottom" >
            <img height="4px" width="100%" src="Images/greenB.gif" />
        </td>
        <td class="bottomRight">
            <img height="16px" width="16px" src="Images/greenBR.gif" style="vertical-align:top"/>
        </td>
    </tr>
</table>

Приведенные выше HTML и CSS прекрасно работают в IE из режима браузера 7–9, но при изменении Document Mode на IE 7 Standard он искажается Кажется, что есть промежуток между левой и правой вертикалью.

enter image description here

Как я могу решить проблему? Прежде чем использовать CSS3 border-radius, каков наилучший подход для реализации закругления угла на веб-странице?

спасибо заранее.

Ответы [ 2 ]

0 голосов
/ 05 марта 2012

Не используйте таблицы для разметки. Для закругленных углов в браузере, которые не поддерживают собственные border-radius, вы можете использовать графические углы в качестве фона для абсолютно позиционированных пустых элементов.

0 голосов
/ 04 марта 2012

Я бы использовал что-то вроде http://css3pie.com/, что позволяет использовать некоторые функции CSS3 в версиях

...