こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

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">
<!--
function openwin(url, winname, width, height) {
if(!width) { width = 600; }
if(!height) { height= 400; }
if(!winname) { winname = 'win'; }
w = window.open(url, winname,'width=' +width+ ',height=' +height+

',status=no,scrollbars=yes,directories=no,menubar=no,resizable=yes,toolbar=no');
}
//-->
</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">テスト1</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個ほど

投稿日時 - 2011-01-23 05:26:14

QNo.6468142

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

こんばんは。

私のFirefoxで再現できませんでした・・・。
なんでかな?

投稿日時 - 2011-01-27 00:00:54

あなたにオススメの質問