6

HTMLで組織図を作成しようとしています。コードはかなり単純ですが、Chrome/SafariとOperaでのレンダリングに問題があります。

FirefoxとIEで機能するため、結果は次のようになります。

望ましい結果、FirefoxとIE

これがChromeとSafariです

ChromeとSafari

そしてここにOperaがあります：

オペラ

問題はborder-collapse: collapseCSSのプロパティにあります。古いコーディングスタイルを使用すると、cellspacing="0" cellpadding="0"多かれ少なかれ機能しますが、HTML5では無効です。

問題を示すためにjsFiddleを作成しました：http：//jsfiddle.net/aGVp4/7/

私のHTML：

<table cellspacing="0" cellpadding="0">
    <tr>
        <td colspan="3"></td>
        <td colspan="2" class="case"></td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td colspan="3"></td>
        <td colspan="2" class="case"></td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td></td>
        <td colspan="3" class="right bottom"></td>
        <td colspan="3" class="bottom"></td>
        <td></td>
    </tr>
    <tr> <!-- No colspan here, to make the layout symmetrical -->
        <td class="right"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td class="right"></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2" class="case"></td>
        <td colspan="4"></td>
        <td colspan="2" class="case"></td>
    </tr>
</table>

そして私のCSS：

.orgchart {
    border-spacing: 0;
    border-collapse: collapse;
}

td {
    width: 3em;
    height: 1em;
}

td.case {
    border: 1px solid black;
}

td.right {
    border-right: 1px solid black;
}

td.bottom {
    border-bottom: 1px solid black;
}

td.top {
    border-top: 1px solid black;
}
4

3 に答える 3

5

この問題は、ブラウザでの折りたたみ境界モデルの解釈が異なることが原因のようです。境界の競合解決は、スロットではなくセルで定義されます。を使用するcolspan=3と、1つのセルが3つのスロットにまたがります。

2行目の2番目のセルには下の境界線があり、3行目の2番目のセルには上の境界線がありません。国境が崩壊したとき、固体は何も勝ちません。ただし、セルは異なる列にまたがるため、部分的にしか隣接していません。ブラウザはこれを別の方法で処理します。Chromeは境界線を上のセルのすべての列にまたがらせますが、Firefoxは境界線をセルが共有する1つの列にのみ広げます。これはより合理的ですが、CSS2.1は問題を未解決のままにしているようです。

で遊んでみましたborder: hidden。これはChromeでは役立ちますが、Operaでは新しい問題が発生します。

2つの選択肢があるようです。HTML属性が機能する場合は、HTML属性を使用できます。HTML5 CRでは廃止および禁止されていると宣言されていますが、同じドキュメントでは、ブラウザでの継続的なサポートも必要です。

しかし、よりクリーンで、おそらくより堅牢なアプローチは、空のセルを追加することで問題を回避することです。これは、2つの3行目のセルを2つのセルに分割して、そのうちの1つだけが2行目のセルと境界線を共有することを意味します。これにより、テーブルはさらにグリッドのようになりますが、本質的に複雑ではありません。

<table class="orgchart">
<tr>
    <td colspan="3"></td>
    <td colspan="2" class="case"></td>
    <td colspan="3"></td>
</tr>
<tr>
    <td colspan="3"></td>
    <td colspan="2" class="case" ></td>
    <td colspan="3"></td>
</tr>
<tr>
    <td></td>
    <td colspan="2" class="bottom"></td>
    <td class="right bottom"></td>
    <td  class="bottom" ></td>
    <td colspan="2" class="bottom" ></td>
    <td></td>
</tr>
<tr> <!-- No colspan here, to make the layout symmetrical -->
    <td class="right"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="right"></td>
    <td></td>
</tr>
<tr>
    <td colspan="2" class="case"></td>
    <td colspan="4"></td>
    <td colspan="2" class="case"></td>
</tr>
</table>
于 2013-03-15T22:20:46.240 に答える
1

<tr></tr>colspanの下に新しい空の行を追加すると、この問題が修正されます（美しい解決策ではありませんが、機能します）。

于 2015-05-13T05:10:41.793 に答える
0

私はあなたのjsfiddleで遊んで、ChromeとSafariの問題を修正するためのハックを見つけました。

FFとIEでも動作しますが、Operaではテストしていません。

これを試してください（jsfiddle）：

td.bottom {
  border-top: 1px solid white; // this is the hack
  border-bottom: 1px solid black;
}
td.right.bottom {
  border-top: none; // fix for IE
}

これはハックであるため、グラフが複雑になると機能しない可能性がありますが、短期的にはこれが役立つことを願っています。

于 2013-03-15T08:54:19.520 に答える