CSS 배경 색상 테이블 TD 인터넷 익스플로러에 잘못 표시

StackOverflow https://stackoverflow.com/questions/2014353

문제

Internet Explorer 6에서는 작동하지 않는 매우 간단한 HTML과 CSS가 있습니다.

<!DOCTYPE HTML>
<html>
    <head>
        <style>        
            table td.one.read {background-color:#FFD700;}
            table td.two.read {background-color:#0000ff;}
            table td.three.read {background-color:#ff8c00;}
        </style>
    </head>

    <body>
        <table>
            <tr class="head">
                <td></td>
                <td class='one read'>one</td>
                <td class='two read'>two</td>
                <td class='three read'>three</td>
            </tr>

            <tr>
                <td>Legend</td>
                <td class='one read'>1</td>
                <td class='two read'>2</td>
                <td class='three read'>3</td>
            </tr>
        </table>
    </body>
</html>

각 열마다 배경색이 다른 간단한 테이블입니다. 물건을 간단하게 유지하기 위해 다른 CSS/HTML을 제거했습니다. 문제는 모든 열이 Internet Explorer 6에서 동일한 주황색으로 표시되는 것입니다. Firefox.

어떻게 작동하게 할 수 있습니까?

도움이 되었습니까?

해결책

이것은 IE6의 버그입니다.

여러 클래스 이름이있는 CSS 선택기가있는 경우 (예 : .three.read), IE6은 마지막 이름을 제외한 모든 클래스 이름을 무시합니다.

따라서 IE6은 선택기에 대한 세 가지 CSS 규칙을 봅니다. table td.read.

이를 해결하려면 수업을 결합 할 수 있습니다. (예 : <td class='OneRead'> 그리고 table td.OneRead {background-color:#FFD700;})

다른 팁

IE6에서 여러 클래스가 지원되지 않으며 IE6가 죽기 전에 몇 년 더 기다려야합니다. 그러나 지금은 색상을위한 별도의 클래스를 만들 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top