1

td のプレーン テキストと td のボタン値のテキストを揃えるために、css の詳細を定義して、任意の種類のブラウザー、または少なくともほとんどのブラウザーで揃えるようにしたいと考えています。

以下は私の試行と、IE9/8/7 と Chrome でのレンダリングの違いです。ご覧のとおり、与えられた html は IE9 では問題ないように見えますが、IE8/IE7 と Chrome は間違っています。パディングを (テキスト td に直接、またはテキスト td に追加された div に) 追加しても、IE9 が間違っているため、これは解決されません。

では、すべてのブラウザーでプレーン テキストとボタンの値のテキストが適切に配置されるようにするには、どの CSS 定義を使用する必要があるのでしょうか?

IE9 IE8 IE7 クロム

html:

<!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
    table {
        border: solid black 1px;
        border-collapse: collapse;
        padding: 0;
        border-spacing: 0;
    }

    td {
        border-style: dotted solid none none;
        border-color: black;
        border-width: 1px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 0px;
        padding-bottom: 0px;
        font-style: normal;
        font-family: Verdana;
        font-size: 12px;
        vertical-align: top;
    }

    input.example {
        color: blue;
        background: white;
        padding-top:1px;
        padding-left:0px;
        border: 0px;
        outline:0;
        font-size: 12px;
        cursor: pointer;
    }
        </style>
    </head>

    <body>
      <p/>
      <table>
         <tbody>
            <tr>
               <td>EXAMPLE</td>
               <td><input type="button" class="example" value="EXAMPLE"></td>
            </tr>
            Chrome
         </tbody>
   </body>
</html>
4

5 に答える 5

1

アラインメントが TD 内にある限り、最良の方法valignは TD のプロパティを使用することです。TD タグ内で指定valign="top"して、各 TD 要素がどれほど大きくても、常に先頭に固定されるようにします。

他の配置に関しては、画像とボタンの配置はクロスブラウザーのサポートにとっては恐ろしいものだと思いますが、vertical-aligncss プロパティを指定することもできます。

元：

img,input{
vertical-align: middle
}

と

<td valign="top">EXAMPLE</td>
<td valign="top"><input type="button" class="example" value="EXAMPLE"></td>

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

于 2012-06-07T15:22:18.587 に答える
1

一部のブラウザーのボタンは、単純に高くなっています。これは問題ありません — ブラウザによってボタンの表示が多少異なる場合があります。vertical-align: topTD ではおそらく光栄ですが、ボタンによってテーブルの行が高くなり、左側のセルのテキストが上に押し出されてずれて表示されます。IE7 に関しては、なぜボタンのテキストがこれほど低いのかわかりませんが、これは MSIE です。何にも準拠する必要も、まったく機能する必要もありません。

テキストを適切に揃えたい場合に使用するvertical-align: middleか、line-height や padding を使用して行の高さをすべての人と同じにする場合に使用します。

于 2012-06-07T16:33:07.483 に答える
1

Chrome 用にすべてを構成してから、IE CSS クラスに条件付き CSS ステートメントを配置するのはどうですか?

<!--[if IE 7]>
<!--[if IE 8]>
<!--[if IE 9]>

これでうまくいくはずですが、最適化された最良の方法ではないかもしれません。テキストの配置に関して同様の問題があったことを覚えており、これが役に立ちました。

申し訳ありませんが、コメントせずにこれを回答に入れていますが、私の評判のためにまだコメントできません。

編集
例：

what_exact_parameters を割り当てる必要があるかどうかはわかりません (自分で調べる必要があります)。ダミーの例を示します。

インライン:

td {     
    padding-top: 0px;
    padding-top: 2px\0/; <!-- IE-8 only -->
}


特定の IE のみのスタイルシートをターゲットにする:

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="your-stylesheet-for-ie7-and-down.css" />
<![endif]-->


ここでの問題は、これらのバグが修正されると、条件ステートメントが役に立たなくなるだけでなく、さらに問題が発生する可能性があることです。そのため、少なくともそこには抜本的なものを置かないことをお勧めします。そうすれば、それらのバグが修正されても、ページがまったく壊れることはありません。

条件付き CSS ステートメントの詳細については、次のリンクを参照してください。
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
http://webdesignerwall.com/tutorials/css-特定のインターネット エクスプローラー

于 2012-06-07T15:25:50.077 に答える
1

ボタンをハイパーリンクのようなスタイルにしようとすることは、ブラウザーのスタイルシートに非常に多くのスタイルのシムが配置されているため、一部のブラウザーでは実際にはほぼ不可能です。ボタンの使用を避けることができる場合は、それをお勧めします。

これは、パディングとマージンに加えて、ブラウザーが Firefox などの他のスタイルを追加するためです。

button, input[type="reset"], input[type="button"], input[type="submit"] {
    -moz-appearance: button;
    -moz-binding: none;
    -moz-box-sizing: border-box;
    -moz-user-select: none;
    line-height: normal;
    padding: 0 6px;
    text-align: center;
    text-shadow: none;
}

また、すべてのブラウザーでレイアウトに影響を与えているすべてのものをリセットする必要があります。その後、ボタンがテキストを実際よりも低く押しているように見えるため、テキストが正しい場所にない場合があります。

于 2012-06-07T15:35:14.453 に答える
0

Ben の提案から始めて、最終的に、このやっかいな小さな問題に対する最善の解決策を見つけました。最初は彼の提案をそのまま踏襲してみましたが、スタイリッシュなバージョンとして、vertical-align: top;css td から削除style="valign: top;"して td 要素に追加してみました。最初は、IE7/Chrome では配置が問題なく、IE8/IE9 では少しずれているため、それが正しい方法だと思っていましたが、それがvalign非推奨の属性であり、スタイルに存在しないサブ値であることに気付きました。属性。
したがって、私はさらに調べる必要があり、さまざまなブラウザーで padding-top を調整するアフターバーナー JavaScript のようなものを実行することになりました。次の調整を行う必要がありました。

  • css input.example: padding-top 0px; 高さ: 14px;
  • IE7/quirks/Opera: 以前のすべての sibling-td のプロパティ style.paddingTop を 1px に設定します。
  • IE8/IE9: 何もしない
  • Firefox: 以前のすべての sibling-td のプロパティ style.paddingTop を 2px に設定。

html (Opera と Firefox は IE とは対照的に異なる DOM を使用することに注意してください。以前の兄弟を取得するために別の方法でそれ自体を明示します):

<!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
    table {
        border: solid black 1px;
        border-collapse: collapse;
        padding: 0;
        border-spacing: 0;
    }

    td {
        border-style: dotted solid none none;
        border-color: black;
        border-width: 1px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 0px;
        padding-bottom: 0px;
        font-style: normal;
        font-family: Verdana;
        font-size: 12px;
        vertical-align: top;
    }

    input.example {
        color: blue;
        background: white;
        padding-top:0px;
        padding-left:0px;
        border: 0px;
        outline:0;
        font-size: 12px;
        cursor: pointer;
        height: 14px;
    }
        </style>
    </head>

    <body>
      <p/>
    <table>
     <tbody>
        <tr>
           <td>EXAMPLE</td>
           <td><input type="button" class="example" value="EXAMPLE"></td>
        </tr>
     </tbody>
    </table>
    <script type="text/javascript">
      // use personal custom javascript function to determine browser version
        switch (browser.version()) {
            case "MSIE 7.0":
                var elts = getElementsByClassName('example');
                for (var i=0; i < elts.length; i++) {
                    node = elts[i].parentNode;
                    while (node = node.previousSibling) {
                        node.style.paddingTop = "1px";
                    };
                }
                break;
            case "Opera/9.80":
                var elts = getElementsByClassName('example');
                for (var i=0; i < elts.length; i++) {
                    node = elts[i].parentNode;
                    while (node = node.previousElementSibling) {
                        node.style.paddingTop = "1px";
                    };
                }
                break;
            case "Firefox/10.0":
                var elts = getElementsByClassName('example');
                for (var i=0; i < elts.length; i++) {
                    node = elts[i].parentNode;
                    while (node = node.previousElementSibling) {
                        node.style.paddingTop = "2px";
                    };
                }
                break;
            default:
                // do nothing
        }
    </script>
   </body>
</html>
于 2012-06-08T06:23:27.753 に答える