0

IE7の専門家によるレンダリングの問題についてサポートを利用することができます。私のレイアウトはIE7を除くすべてのブラウザーで美しく機能し、それを機能させるための魔法のスタイルを完全に理解することはできません。

問題のJSFiddleの例はここにあります：http：//jsfiddle.net/rB29C/2/

IE7で表示すると、リンク（ワイングラスの画像）がチェックボックスの下の2行目に押し下げられます。私の目標は、それらを同じ行に配置することです。IE8 +またはその他のブラウザでフィドルを表示すると、期待どおりに機能しています。

浮いた要素の幅と関係があると思いますが、これを修正するための魔法のスタイルの組み合わせがわかりません。アプリに条件付きスタイルシートがあるので、IE7固有のスタイルを実行できますが、可能であればマークアップベースの変更は避けたいと思います。

私も何が起こっているのかを理解したいので、将来これを避けることを学ぶことができればと思います:)

4

3 に答える 3

0

私はそれを理解しました、そして解決策はCSSではなくHTMLにあります。次のように、ワイングラスの画像を異なるセル間で移動するだけです。

<table>
<tbody>
    <tr>
        <td class="type">
            <input class="checkbox" type='checkbox' />
        </td> 
            <a class="link" href="#"></a>
        <td class="name">Name
        </td>
        <td class="dates">Dates
        </td>
        <td class="score">Score
        </td>
    </tr>
</tbody>
</table>

これに関する問題は、IE7環境でのみ機能し、他の環境では機能しないことです。ページがどのブラウザにあるかによっては、phpで調整できるかもしれません。

<?php
$isIE7 = (get_broswer('broswer') == 'IE' && get_browser('version') < 8 )
?>
<table>
<tbody>
    <tr>
        <td class="type">
            <input class="checkbox" type='checkbox' />
        <?php if ($isIE7) echo('</td> 
            <a class="link" href="#"></a>');
           else echo('
            <a class="link" href="#"></a>
        </td> ');?>
        <td class="name">Name
        </td>
        <td class="dates">Dates
        </td>
        <td class="score">Score
        </td>
    </tr>
</tbody>
</table>

phpを避けたいかどうかはわかりませんが、避けたい場合はJavaScriptバージョンもあります。

于 2012-07-11T20:18:58.050 に答える
0

IE7は、セルの幅が小さすぎると、セル内のアイテムを一番下に押し出すように見えます。td.typeの幅を14％に増やしたところ、フィドルで機能しているように見えましたが、テーブルを縮小して拡大する必要がある場合、これは最善の解決策ではない可能性があります（テーブルが押しつぶされた場合、ワイングラスは再び下）。それ以外の場合は、％の代わりに設定されたピクセル幅を使用することを検討してください

于 2012-07-11T20:56:40.267 に答える
0

私は自分の問題の解決策を見つけることができました。JSFiddleを新しいスタイルで更新しました。

http://jsfiddle.net/rB29C/13/

要約すると、元のフィドルから次の追加のスタイルを設定しました。IEは、適切にレイアウトおよびサイズ設定されているようです（含まれているtdを含む）。

input.checkbox {
    display: inline;
    float: left;
}

a.link {
    display: inline;
    float: left;
    clear: right;
    margin: 0;
}

うまくいけば、これはIE7の奇妙なことに苦労している他の誰かに役立つでしょう！

于 2012-07-12T19:26:47.083 に答える