出産前後の痔にはご注意!

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個ほど

「ページを拡大縮小でborderが消える場」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (1件)

こんばんは。



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

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QFireFoxで見るとブラウザの幅によってテーブルの枠線が消える

FireFoxで表示するときにブラウザの幅によったり出たり消えたりします(上と左の線)。
柔軟に変化できるように結構苦労して書いたのですが、ここに来て挫折しそうです、どなたか解決策を下さい。
赤の枠線です。
ソースの↓確かこのあたりが消えたり出たりします
<!--▼中右全体枠-->色#990000

文字数オーバーなため.txtと.htmlのURLを
txt
http://tubamesound.uijin.com/index.txt

html
http://tubamesound.uijin.com/index.html

よろしくお願いします。

Aベストアンサー

<!--▼インフォメーションボ-ド-->
<table width="100%" height="100%" cellspacing="0" cellpadding="0" style="border:solid 1px #000099;">

上記のテーブルの、widthとheightを100%より少ない値にすれば、ウィンドウサイズを拡大・縮小してもこの赤枠の線は消えない様になります。
例えば、width="99%" height="99%" とするだけでも解消はされました。

原因は、高さの相対関係の計算が親子で矛盾してしまっているからでしょう。IEはとにかく何かと”緩い”ので適当に表示してしまうのですが、Firefox等はシビアな結果を返してきますのでIEで何となく上手く行く様にという作成の仕方はできるだけ避けて、きちんと構造とスタイルにエラーや矛盾がないかを確認しながら構築して行く方が宜しいでしょう。

ただし、このHTML(http://tubamesound.uijin.com/index.html)にはかなり文法上の間違いが多いです。文法チェッカーにかけると、致命的エラーが20個ぐらい列挙されてしまいます。
中でも、

・テーブルのセルの開始タグと閉じタグが合っていない(Line84~137にかけて数カ所)。
・同一タグ内でSTYLE属性の指定が重複している(<td width="1%" height="1%" style="border:solid 1px #000099;" style="border:solid 1px #000099;">)。
・このDTD宣言(<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">)では記述できない空要素タグの閉じ方をしている(<link rel="stylesheet" type="text/css" href="http://img.shinobi.jp/tadaima/tdftad.css" />)。
・属性値の書き方が正しくない(<img>のwidthやheightを"130px""50px"という様に記述している。pxは指定できない。)

あたりは今のうちに文法チェッカーにかけてコードをよく見直して、エラーを正しておく事をお奨めします。コンテンツが沢山入ってしまってからではますます修正がややこしいことになると思いますので。

<!--▼インフォメーションボ-ド-->
<table width="100%" height="100%" cellspacing="0" cellpadding="0" style="border:solid 1px #000099;">

上記のテーブルの、widthとheightを100%より少ない値にすれば、ウィンドウサイズを拡大・縮小してもこの赤枠の線は消えない様になります。
例えば、width="99%" height="99%" とするだけでも解消はされました。

原因は、高さの相対関係の計算が親子で矛盾してしまっているからでしょう。IEはとにかく何かと”緩い”ので適当に表示してしまうのですが、Firefox等は...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q文字拡大時にレイアウトが崩れる

普段何も気にせずに制作していたら○のように
文字を拡大してもレイアウトが崩れなかったのですが
新しくホームページを作っている時×のようなレイアウトになってしまいました。
下のfooter部分に食い込んできます。

2つのホームページを見比べても解決しません。
何が悪いのか見当も付きません。

似たような回答は他にもあったのですが解決できませんでした。
ご教授いただけますでしょうか

Aベストアンサー

No2です。解決できたようでよかったですね^^
heightはケースにもよりますが、基本的に可変の可能性のあるdivなどには指定しないほうが良いと思います。
ユーザーが文字を大きくしたときに崩れたり、のちのち文言を変更しようとした場合にCSSをその都度いじらなくてはならなかったり…と、ユーザーにも作成者にも不便になりますしね。
heightを指定していたのは、もしかして左右のボックスの高さを揃えたかったとかでしょうか?(もしそうならheightLine.jsなどを使用するといいかも!)
頑張ってください!

Q文字列から、特定の文字を削除したい

アンケートで入力された値を受け取り、メールで送信しているのですが、受け取った値から、特定の文字列を削除することは可能でしょうか?

例えば電話番号の入力の場合、
03-xxxx-xxxx →03xxxxxxxx
077-xxx-xxxx →077xxxxxxx
のように、-(ハイフン)が入力されていたら、-を削除した文字列に置換してメール送信したいのです。
入力する時に、3つのテキストエリアに分けるのは諸事情でできないので、特定の文字を削除する関数か処理方法がありましたら、教えていただきたいです。
よろしくお願いします。

Aベストアンサー

str_replace
http://itbtech.itboost.co.jp/man/php_man/function.str-replace.html

<?php
$orig_telno = "03-xxxx-xxxx";

$telno = str_replace("-", "", $orig_telno);
echo $telno;

03xxxxxxxx

“PHP 文字列” あたりをキーワードに検索すれば
そんなに難しいものでもないような。

Qページ移動した場合の、フォームデータの保持

PHP初心者です。

私が作っているPHPのシステムで、ユーザーがフォームデータ入力途中に、他のページに移動すると、「戻る」ボタンなどですぐに戻ってきても、入力したフォームデータが消えてしまいます。

例えば、この「教えてgoo」の「新しい質問をする」のフォームはPHPで生成されていますが、

http://oshiete1.goo.ne.jp/oshiete_new.php3?c=256

途中でちょっと他のページに行っても、(すぐ戻れば?)入力したデータは保持されますよね。

こんなふうにしたいのですが、どうすればよいでしょうか?
「戻る」ボタンで戻ったときに、サーバーから毎回新しいXHTMLをロードしてくるので、入力データがクリアされてしまうのでしょうか?

フォーム入力⇒確認画面⇒「戻る」ボタンで戻るとフォームデータが保持されないということではなく、あくまでフォーム入力中に、ちょっと他のページに行って戻ってくるという設定です。

よろしくお願いします。

Aベストアンサー

原因はセッション関連にありそうですね。
session_cache_limiter()
というのは指定されていますか?
恐らく現状はnocache(ページ内容をキャッシュしない状態)になっているのだと思います。

もし
session_cache_limiter('nocache');
となっていれば、publicもしくはprivateへ変更してみて下さい。
ないようでしたら、session_start()の前に
session_cache_limiter('public');
session_cache_limiter('private');
のどちらかを記述してみて下さい。
publicだと、クライアントマシン、プロキシのどちらもキャッシュを保持しますが、
privateだとクライアントマシンのみキャッシュを保持します。
どちらが良いのかは使い方によると思いますし、
nocacheでないと困る時もありますから。

session_startを削除してしまって良いかどうかは、
他の部分の処理との関連が分からないので何とも言えないです。

一度試してみて下さい。

参考URL:http://jp.php.net/session_cache_limiter

原因はセッション関連にありそうですね。
session_cache_limiter()
というのは指定されていますか?
恐らく現状はnocache(ページ内容をキャッシュしない状態)になっているのだと思います。

もし
session_cache_limiter('nocache');
となっていれば、publicもしくはprivateへ変更してみて下さい。
ないようでしたら、session_start()の前に
session_cache_limiter('public');
session_cache_limiter('private');
のどちらかを記述してみて下さい。
publicだと、クライアントマシン、プロキシのどち...続きを読む

QExcelで正規表現やワイルドカードなどを使って置換したいのですが…

Excelの中で置換をしたいのですが、
例えば以下のように( )かっこでくくられた不規則な数字を検索し、その前後に記号を付加するといった具合です。
Wordだと置換で正規表現が使えますが、Excelではやはりマクロを作らないとだめなのでしょうか?

 置換前
  あいう(123)かきく(あああ)
  さしす(ははは)たち(589)つ
   ・      ・
   ・      ・

 置換後
  あいう★(123)★かきく(あああ)
  さしす(ははは)たち★(589)★つ
   ・      ・
   ・      ・

Aベストアンサー

以下の正規表現アドインを使用すると可能です。
http://srcedit.pekori.jp/tool/excelre.html

置換前 ((\d+))
置換後 ★$1★

QCSSで画面サイズを縮小するとレイアウトが大きく崩れてしまう

CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更(縮小)すると右側のBOXがすべて左側の下に回り込んでしまいます。
できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。
色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。
また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか?
frameとかだと*で対応するみたいなんですが・・・

ひとまず、周り込を回避する方法が優先です。
どうかよろしくお願いいたします。


@charset "shift_jis";


body {
margin: 0px;
height: 100%;
padding: 0px;
font-size: 12px;
line-height: 150%;
}
html {
height: 100%;
}
img {
border: none;
vertical-align: bottom;
}

#left {
background-color: #666666;
width: 350px;
float: left;
min-height: 100%;
height: 100%;
}
#right {
height: 100%;
padding: 35px 0 0 0;
min-height: 100%;
width: auto;
margin: 0 0 0 350px;
}

CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更(縮小)すると右側のBOXがすべて左側の下に回り込んでしまいます。
できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。
色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。
また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか?
frameとかだと*で対応するみたいなん...続きを読む

Aベストアンサー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
/* left[liquid] right[fixed] */
body {
overflow: hidden;
zoom: 1;
}
#left {
float: left;
width: 100%;
overflow: hidden;
zoom: 1;
}
#left div.contents {
margin-right: 240px;
}
#right {
float: right;
width: 240px;
margin-left: -240px;
overflow: hidden;
zoom: 1;
}
/* your design */
body{
margin:0;
width:100%;
height:100%;
}
#left{
background: #eee;
height:100%;
}
#right {
background: #ccc;
height:100%;
}
</style>
<body>
<div id="left">
<div class="contents">
text text text text text text text text text text text text text text
</div>
</div>
<div id="right">
text text text text text text text text text text text text text text
</div>
</body>
</html>
こんな感じでどうでしょう?サブコンテンツ固定のメインコンテンツ可変のレイアウトです。(注:IE6とFirefox2.0でしか確認してません)
最近ブログに同じような記事を書いたので、よろしかったら参考にしてみてください。

簡単にCSSレイアウトできるフレームワークを考えてみる - Cyokodog::Diary
http://d.hatena.ne.jp/cyokodog/20080731/1217496357

サブコンテンツ固定・メインコンテンツ可変のCSSレイアウト - Cyokodog::Diary
http://d.hatena.ne.jp/cyokodog/20080805/1217955315

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
/* left[liquid] right[fixed] */
body {
overflow: hidden;
zoom: 1;
}
#left {
float: left;
width: 100%;
overflow: hidden;
zoom: 1;
}
#left div.contents {
margin-right: 240px;
}
#right {
float: right;...続きを読む

Qpingでポートの指定

pingでIPアドレスを指定して、通信できるかどうかというのは
よく使いますが、pingでポートを指定して応答するかどうかは調べられるのでしょうか?

よろしくお願いします

Aベストアンサー

pingを含むICMPというプロトコルは、OSIの7レイヤで言うところのL2(同一セグメント内通信)とL3(IPルーティングされた通信)の両方にまたがる、ちょっと珍しいプロトコルです。

IPアドレスは指定できますが、別サブネットに属するIPアドレスに到達できればL3通信、できなければゲートウェイと呼ばれる同一サブネットに属する中継装置からの回答を得るという点でL2(MAC通信ではなく、同一セグメント内通信という意味)通信です。

ポート番号はL4で使用されるアドレスですから、L4機能の疎通確認はping(を含むICMP)ではできません。

FTPの疎通確認であれば、クライアントからサーバに対するTCP/21通信(FTP-CMD)が可能であること(サーバからクライアントへのTCP/21からの応答を含む)+サーバからクライアントに対するTCP/20通信(FTP-DATA)が可能であること(クライアントからサーバへのTCP/21からの応答を含む)が必要でしょう。

監視ソフトによるものであれば、
・クライアントからサーバへのログイン(TCP/21)
・クライアントからサーバへのlsの結果(TCP/20)
で確認すればよいでしょう。

pingを含むICMPというプロトコルは、OSIの7レイヤで言うところのL2(同一セグメント内通信)とL3(IPルーティングされた通信)の両方にまたがる、ちょっと珍しいプロトコルです。

IPアドレスは指定できますが、別サブネットに属するIPアドレスに到達できればL3通信、できなければゲートウェイと呼ばれる同一サブネットに属する中継装置からの回答を得るという点でL2(MAC通信ではなく、同一セグメント内通信という意味)通信です。

ポート番号はL4で使用されるアドレスですから、L4機能の疎通確認はping(を含む...続きを読む


人気Q&Aランキング