ページを拡大縮小でborderが消える場合の対処法

締切済

質問者：orehatens
質問日時：2011/01/23 05:26
回答数：1件

Firefoxで開いたページctrl＋マウスのクルクルで拡大縮小すると
tableの上下に設定したborderが部分的に消えてしまいます。

下記コードは自分のページに使われているのを似せて作りました。
消える具合を再現しようとしたのですが消えませんでした。
一部しか似せてないからでしょうか。

ページトップにあるボタン複数は、
マウスオーバーで画像が切り替わるのをCSSで作ってありますが、
それは関係ないですよね。

IE9、IE8、chromeは消えませんが、Firefoxでは消えてしまいます。
こういったバグは一体何が原因で起こるのでしょうか？
何か改善方法はありませんか？

最も私が求めているアドバイスは、
例えば、
『floatで指定した値と同じ方向にmarginの指定をすると、
指定値の倍程度になってしまうバグを解消するには、
floatとmargin が同じ方向のプロパティを持つ要素に
display:inline;を付け加える』

これが理想ですが、でもヒントだけでも頂けると助かります。
宜しくお願い致します。

<html>
<head>
<title>テスト</title>
<script language="JavaScript" type="text/javascript">

</script>

<style type="text/css">

table.aaa{
width:750px;
border-top:1px solid #333;
border-bottom:1px solid #333;
border-collapse:separate;
border-spacing:0;
text-align:center;
margin-top:30px;
}

td.bbb, td.ccc{
padding:30px 30px;
}

td.ccc{
width:100px;
background:#000;
color:#fff;
}

ul{
width:750px;
margin-left: -23px;
overflow:hidden;
}

ul li {
display: inline;
width: 200px;
margin-left: 30px;
float: left;
}

ul li img {
display: block;
border: 1px solid #555;
}

</style>
</head>
<body>
<form method="post"><input type=button onClick="openwin('xxx.html');" value="テスト"> </form>

<span class="eee"><a name="t1" id="t1">NO1</a></span>
<table class="aaa">
<tr>
<td class="ccc">テスト１</td>
<td class="bbb">※※※※※※※※※※</td>
</tr>
</table>
<ul>
<li><a href="xxx.html#w1"><img src="sample.jpg" width="200" height="150" ></li>
<li><a href="xxx.html#w2"><img src="sample.jpg" width="200" height="150" ></li>
<li><a href="xxx.html#w3"><img src="sample.jpg" width="200" height="150" ></li>
</ul>
<ul>
<li><a href="xxx.html#w4"><img src="sample.jpg" width="200" height="150" ></li>
</ul>

<table～…～</ul>まで10個ほど繰り返しされます。<li>の数は一項目最大9個ほど