相対配置要素の位置指定に負の値を使用できない

症状

相対配置を行う場合の位置指定プロパティ(left, right, top, bottom)に負の値を指定すると無視されてしまう。

例示

<style type="text/css">
div#a {
  border-left: 3px solid red;
}
div#b {
  border-width: 3px 3px 3px 0;
  border-style: solid;
  border-color: blue;
  background: aqua;
  width: 100px;
  float: left;
  position: relative;
  left: -3px;
}
div#c {
  margin-left: 120px;
}
</style>

<div id="a">
<div id="b">B</div>
<div id="c">C<br>C</div>
</div>
B
C
C

id属性にbが指定されたdiv要素は、id属性にaが指定されたdiv要素の左ボーダーを隠すように、相対配置で左へ3px移動させています。

スクリーンショット

WinIE6WinIE6.0での表示(標準モード)

補足

マージンに負の値を指定することでこのバグを回避できます。ただし、WinIEでは指定値以上のマージンがとられてしまうようです。

div#d {
  border-width: 3px 3px 3px 0;
  border-style: solid;
  border-color: blue;
  background: aqua;
  width: 100px;
  float: left;
  margin-left: -3px;
}
<div id="a">
<div id="d">D</div>
<div id="c">C<br>C</div>
</div>
D
C
C

※id=a, id=c のdiv要素のスタイルは前出の例での指定と同じです。

修正状況

MacIE5で不具合の発生が確認されたようです。

関連記事

スポンサーリンク

REVERSE関数 文字列を反転させる

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る