12

スタイルを設定したい HTML があります。html はテーブル (および実際のテーブル) であり、境界線を付けたいと考えています。この要素には、上隅に小さな三角形を配置するために使用する :before 疑似要素もありました。

JSFiddle はこちらです。それが理にかなっていることを願っています。マークアップと CSS は、実際には大きなサイトの小さな部分であるため、可能な限り削除しました。

http://jsfiddle.net/GolezTrol/28yDb/2/

border-collapse: collapse;ここでの問題は、テーブルと疑似要素の上にある2 つの列を持つことの組み合わせにより:before、要素の上の境界線が部分的に消えることです。最初の列の長さだけがあります。

ボーダーの上にあるのは疑似要素だと思いますが、この要素は非常に小さく、私が知る限り、これは問題ではありません。念のために疑似要素を追加visibility: hidden;したところ、三角形がなくなったことがわかりますが、境界線はまだ不完全です。

残念ながら、これは MediaWiki によって出力されるため、マークアップを変更することはできませんが、CSS を完全に制御できます。

HTML:

<div id="globalWrapper">
<div id="column-content">
<div class="thumb tright">
<table class="infobox vcard" style="">
    <tbody>
        <tr>
            <th colspan="2" class="fn org" style=""> Example text</th>
        </tr>
        <tr>
            <th>Row head</th>
            <td>Content</td>
        </tr>

CSS:

/* Generic table styling */
table {
  border-collapse: collapse;
  /*border-spacing: 0;*/ }

/* The box */
.thumb.tright table.infobox.vcard {
    border: 3px solid #fae104;
    position: relative;
}

/* Triangle */
  .thumb.tright table.infobox.vcard:before {
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    border-top: 5px solid transparent;
    top: -7px;
    border-left: 10px solid #555;
    visibility: hidden;
    right: -1px; }

を削除すると機能することはすでにわかっていますが、それborder-collapse: collapse;が適切な解決策であるかどうかはわかりません.

ところで。Chrome 29 と Internet Explorer 10 の両方でこの問題が発生しました。他のブラウザーはテストしていません。

アップデート

問題を解決するために「border-collapse」を使用する、または使用しない代わりに、これも機能することがわかりました。

.thumb.tright table.infobox.vcard tbody {
    display: block;
}

したがって、テーブル自体はまだテーブルであり、境界線や配置などと同様に、疑似要素もテーブル上にあります。以前はスタイルが設定されていなかった tbody はブロックになり、問題は両方のブラウザーで解決されます。試行錯誤でこれを見つけましたが、その背後にある理由はまだわかりません。

更新されたフィドル: http://jsfiddle.net/GolezTrol/28yDb/9/

4

3 に答える 3

2

StackOverflowとjsFiddleの初心者である私は、解決策だと思うFiddle を更新しました。疑似クラスをテーブル自体からテーブル ヘッダーに移動し、:after に変更する以外は、CSS を変更しませんでした。Firefox と Chrome で動作します。

/* Triangle */ 
.thumb.tright table.infobox.vcard th:after { }

Border-collapse: seperate は IE8 ではサポートされていませんが、サポートされると思います。

  • 編集：気にしないでください;）
于 2013-09-17T07:54:13.763 に答える
0

Webkit ブラウザでのみ発生する問題だと思います。「ブラウザのバグ」と見なすことができます。

th は、tbody ではなく、thead 内にある必要があります。

<thead>
        <tr>
            <th colspan="2" class="fn org" style=""> Example text</th>
        </tr>
</thead>
<tbody>
        <tr>
            <th>Row head</th>
            <td>Content</td>
        </tr>
<tbody>

そして、これが正しい解決策だと思います。推奨されていない場所に要素を配置しているため、問題が発生するのは正常なはずです。

編集：thirtydotが指摘したように、thをtdに変更しても結果は変わりません。th を thead セクションに移動した場合にのみ機能します。この時点で途方に暮れています。これを解決する方法が見つかりません。

しかし、少なくとも、この問題の原因について私の推測を提供できると思います: :before ターゲット要素内に疑似要素を作成します。どのような要素かはわかりませんが、ブラウザが td. その場合、レンダリング後の html は次のようになります。

<table>
       <td></td> /*the pseudo element*/
       <tbody>
                <tr>
                    <th colspan="2" class="fn org" style=""> Example text</th>
                </tr>
                <tr>
                    <th>Row head</th>
                    <td>Content</td>
                </tr>
        <tbody>
</table>

言うまでもなく、これは奇妙に見えます。上記の html を試してみると、結果が問題に似ていることがわかります。border-collapse:collapse は、2 つのセルが隣り合っている場合、またはセルがテーブルの境界線の隣にある場合に、2 つの境界線を結合します。したがって、この場合、適切な colspan を持たない疑似要素は 1 列しかなく、残りの行は空です。何もありません。これがバグの原因だと思います。テーブルの境界線の隣にセルがないため、境界線はまったく作成されません。

本当の理由はもう少し複雑かもしれませんが (「スレッドを挿入してもバグが発生しないのはなぜですか?」)、私の答えはそれほど的外れではないと思います。:)

于 2013-09-13T22:27:07.747 に答える
0

私が考えることができる唯一の合理的な説明は、モードの と互換性がないということですpseudo-element :before。それが問題を解決する理由です。突然、ブラウザーは疑似要素を気にせずに上部の境界線を表示できます。display: tabletablecollapsedborder-collapse: separate;

よく見ると、境界線の欠落部分が 2 列目の幅であることがはっきりとわかります。疑似要素に変更するとafter、テーブルと疑似要素の境界線が折りたたまれているため、右下隅の境界線が失われます。

border-bottomのthをモードに3px solid red変更すると、 がを圧倒し、境界線が赤くなります。のパワーとそれに従うのは同じルールだと思います。スペックに詳しい方が答えてくださると助かります。collapsedthtableafterbefore

このように考えると、次の解決策以外に解決策はないと思います。

  • 別枠の使用
  • 親に疑似要素を置くdiv

私が調べたのは、pseudo elementが実際に としてレンダリングされ、blockに変更できることです。ただし、これらのいずれも動作を変更しません。tablelist-item

DOMに関して疑似要素がレンダリングされる場所に関するAv Avtの回答に実際に準拠している非常にランダムなもの。

このように追加する:beofreと、境界線は残ります：

.thumb.tright table.infobox.vcard tr:before

明らかに、行と同じ数の新しい疑似要素が作成されます。

于 2013-09-13T22:57:58.160 に答える