2010/07/27

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

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

  1. 重覆寫兩個 css 的項目, 但 FF 的項目要在 IE 的之後:
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <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 的屬性之後:
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <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>
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)