19

[編集: 絶対配置を使用しているため、box-sizing: border-box は適用できないように思われることを明確にしました]

次のコードは、私の問題を示しています。フローベースのレイアウトではさらに扱いにくいことがわかったので、絶対配置を使用していますが、提案は受け付けています。私が欲しいのは、ノードの配置に影響を与える境界線なしで、任意の要素の周りの境界線です。(境界線は、コンテンツによって切り取られたり上書きされたりする場合がありますが、問題ではありません。)

特に、親の境界線はその子の境界線とオーバーラップできる必要がありますが、これはデフォルトの動作ではありません。CSS の box-sizing 属性を border-box に設定して、必要な効果を実現できますが、(私が信じている) インライン要素を使用する場合のみです。絶対配置の要素には影響しません（私が理解しているように）。

したがって、私のアプローチは、負のマージンを使用して、子の位置を境界線の幅だけオフセットすることでした。これは確かに境界線の存在の効果を相殺するように見えますが、残念ながらスケーリング係数全体で一貫した方法ではありません. 大規模に見ると、問題ないように見えます。Chrome のデフォルトのブラウザー ズームでは、要素の配置が少しずれます (高すぎるように見えます)。小さくすると、要素の位置が反対方向にずれます。

しかし、境界線を完全に削除すると、レイアウトは問題なく拡大縮小されるようです。

だから私の質問は: 要素の配置に影響を与えずに HTML 要素に境界線を設定する信頼できる (スケーラブルな) 方法はありますか?

[例では、境界線の一部に異なる色を使用しています。黒だけを表示したいのですが、拡大すると赤と緑の境界線が表示され、要素の位置が境界線の存在によって影響を受けていることがわかります。]

ありがとうRoly .bordered { position: absolute; 高さ: 18px; ボーダー: 2px ソリッド; マージン: -2px; } 

<span class="bordered" style="width: 55px; left: 30px;">
  <span class="bordered" style="width: 8px; left: 0;">
    (
  </span>
  <span class="bordered" style="border-color: green; width: 47px; left: 8px;">
    <span class="bordered" style="border-color: red; width: 39px; left: 0;">
      <span class="bordered" style="width: 8px; left: 0;">
        5
      </span>
      <span class="bordered" style="width: 31px; left: 8px;">
        <span class="bordered" style="width: 23px; left: 8px;">
          Nil
        </span>
      </span>
    </span>
    <span class="bordered" style="width: 8px; left: 39px;">
      )
    </span>
   </span>
 </span>
4

3 に答える 3

26

outlineCSS2プロパティを試してください:

.bordered {
    outline:2px solid blue;
}

アウトラインは要素の位置には影響しません。

ここに示すように、CSS3 を使用することもできoutline-offsetます: http://www.css3.info/preview/outline/

于 2013-02-05T12:10:12.870 に答える
11

また、幅がゼロの境界線を使用して（レイアウトに影響を与えないように）、ボックスシャドウを追加して、表示されている境界線をエミュレートすると、うまくいくように見えることもわかりました。

于 2013-02-05T13:00:58.500 に答える