2010/07/27

[CSS] 相容 IE 與 FireFox 的 CSS 寫法

IE 與 FireFox (FF) 在 CSS 的屬性值上有著許多差異, 例如: center與-moz-center
以下是整理網路上的討論並測試出的兩個做法:

  1. 重覆寫兩個 css 的項目, 但 FF 的項目要在 IE 的之後: 
    <html>
<head>
    <style>
        .container
        {
            text-align: center;
            border: solid 1px blue;
        }
        .container
        {
            text-align: -moz-center;
            border: solid 1px blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <table>
            <tr>
                <td>
                    Text
                </td>
            </tr>
        </table>
        <div>
</body>
</html>
  2. 寫一個項目, 但 IE 的屬性要加上 # 符號(有人測試加 ^ ~ @ # $ % ^ & * ( ) _ + 都可以), 且 IE 的屬性要放在 FF 的屬性之後: 
    <html>
<head>
    <style>
        .container
        {
            text-align: -moz-center; 
            #text-align:center;
            border:solid1pxblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <table>
            <tr>
                <td>
                    Text
                </td>
            </tr>
        </table>
        <div>
</body>
</html>
於

沒有留言:

張貼留言