javascriptで input type="text" の中に文字をスクロールさせているのですが、その幅と、文字のサイズをMac、Win、さらにIE、NSでだいたい同じに表示させることは不可能なのでしょうか。
普通にsize="100" と指定すると、一番広くなるのがMacのIE5(異常に広い)、次にMacその他、Winが一番狭くなります。
スタイルシートを使ったりもしたのですが、やりかたが悪いせいか、うまくいきません。もう諦めて、GIFアニメにしちゃおうかとも思ったのですが、それもちょっとめんどくさいし・・・。
だいたい同じ幅にさえなってくれればいいのですが、よろしくお願いします。

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

A 回答 (1件)

こんにちは。


ご質問のinput要素ですが、これはブラウザによって大きく表示が異なります。
なので、size="100"などの指定だけでは、ほぼ同じように表示させることは
無理かと思います。

ただし、スタイルシートのheight・weightなどで指定してやると、スタイル
シートに対応したブラウザでは同じように表示される様です。・・・んが、
ネスケのform関係のタグはほとんどスタイルシートが効きません。
(ネスケ6からはマシになったとか)

回答にもなってませんが、これはしょうがないかと思います(^^;
    • good
    • 0
この回答へのお礼

ご回答有り難うございました!
あきらめて、真ん中をとったデザインにします。

お礼日時:2001/04/11 13:57

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

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

Qbody font-size:13px; IE6

CSSライブラリ YUIの
font-size:13px; からの font-size:100%; のセットで、

/* YUIのCSS */
body{
font-size: 13px;
*font-size: small;
*font: x-small; }
div{font-size: 100%;}

この場合の以下は、
-------------------
*font-size: small;
*font: x-small;
-------------------
IE6用の
font-size: small と font-size: x-small
の為にあるのでしょうか?
それなら、CSSでfont-size: small; と font-size: x-small;を使わないで、font-size: 85%;とか使えば上記のハック不要って事でしょうか?


<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
上記の様なXHTML,1行目xml宣言付きの場合、
IE6用の
*font-size: small;
*font: x-small;
を書いても
font-size: small と font-size: x-small
が小さくならないので、
xml宣言ありでIE6では標準にならないのでハック不要って事ですか?
IE6で見てもハックを付けても消しても同じなんですが・・・
なんか間違っているのでしょうか?

CSSライブラリ YUIの
font-size:13px; からの font-size:100%; のセットで、

/* YUIのCSS */
body{
font-size: 13px;
*font-size: small;
*font: x-small; }
div{font-size: 100%;}

この場合の以下は、
-------------------
*font-size: small;
*font: x-small;
-------------------
IE6用の
font-size: small と font-size: x-small
の為にあるのでしょうか?
それなら、CSSでfont-size: small; と font-size: x-small;を使わないで、font-size: 85%;とか使えば上記のハック不要って事...続きを読む

Aベストアンサー

そのハックの仕方は細かくチェックを取っていないので完全に把握はしていませんが、IE4~IE7、Mac IE5では動作するようです。

*font-size: small;

でIE6~7の標準準拠モード時にフォントサイズが13px相当になり

*font: x-small;

でIE5~5.5と6~7の互換モード時のフォントサイズが13px相当になるものだと思います。
(ここはちょっと記憶が曖昧なのであまりあてにしないで下さい・・・)


IEでのpxでの絶対指定はフォントサイズを変更してもブラウザ上に反映されなくなってしまいユーザーにとって不便になってしまいます。
なのでsmallなどの相対指定で13px相当に合わせるように上書きされているということでしょう。
ただしIE8の標準準拠ではプロパティの前に*を付けるハックは上手く動作しないようなので、現在ではそのままの指定では問題が出てくるのではないかと思います。

ハックをあまり使われたくないようなのでできるだけソフトなものに置き換えるとすれば、現在ほとんどのブラウザがデフォルトのフォントサイズを16px(標準準拠時)に揃えてきているようなので、
標準準拠モード前提で13pxにする場合以下のように指定をすればいいと思います。

body{
font-size:small !important;
font-size:x-small;
}

そのハックの仕方は細かくチェックを取っていないので完全に把握はしていませんが、IE4~IE7、Mac IE5では動作するようです。

*font-size: small;

でIE6~7の標準準拠モード時にフォントサイズが13px相当になり

*font: x-small;

でIE5~5.5と6~7の互換モード時のフォントサイズが13px相当になるものだと思います。
(ここはちょっと記憶が曖昧なのであまりあてにしないで下さい・・・)


IEでのpxでの絶対指定はフォントサイズを変更してもブラウザ上に反映されなくなってしまいユーザーにとって不便になって...続きを読む

Q携帯サイトにタグを使いたい

携帯は機種によって<font size="">タグが
使えるものと使えないものがありますが
全キャリア向けに作成したサイトに、
文字の大きさが小さくできる機種も想定して
念のために<font size="">タグを入れといても
<font size="">タグが対応していない機種に対して
差し支えないでしょうか?
また、ついで質問なんですが、現在の最新機種では<font size="">タグは
全キャリアに対応しているのでしょうか?

Aベストアンサー

<font size="">タグ対応についてですが下記のようになっているようです。
◆ドコモ……htmlバージョン5.0以降対応
◆au……対応なし
◆ソフトバンク……対応なし
htmlバージョン5.0以降なので、ドコモの機種であればよほど古い機種でない限りソースどおりに表示されるということです。
対応していない機種では、無視されます。

QIE6にてsizeを2以上にした時のSelectの表示について

お世話になります。当方はWindows XP SP2、IE6を使用しています。
selectタグにて、sizeを2以上にするとリスト選択型になりますが、
この時、枠組みがくぼんで影がつき、外側のラインとくぼみのラインで
2重の表示になってしまいます。
size="1"のドロップダウン型だとラインが1本ですっきりとしています。

Firefox3や、Chromeだとsize="1"でもsize="2"でもすっきりと表示されます。
IE6でも同様に1本の表示にしたいのですが、何か良い方法はありますでしょうか。

よろしくお願いいたします。

Aベストアンサー

仕様ですね。

【引用元】http://programming-magic.com/?id=64
「IE6では、selectタグはWindowsのコントロールを使用して表示されている。そのためか、z-indexやborder、text-alignなどいつくかのスタイルが無視される。」

例えば、下記の様なサンプルで検証した場合、
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<form action="#">
<p>
<select class="droplist" name="sample" size="5">
<option value="sample1" selected>サンプル1</option>
<option value="sample2">サンプル2</option>
<option value="sample3">サンプル3</option>
<option value="sample4">サンプル4</option>
<option value="sample5">サンプル5</option>
</select>
</p>

<p>
<select class="droplist" name="sample" size="1">
<option value="sample1" selected>サンプル1</option>
<option value="sample2">サンプル2</option>
<option value="sample3">サンプル3</option>
<option value="sample4">サンプル4</option>
<option value="sample5">サンプル5</option>
</select>

<input class="sample" type="text" name="hoge" value="ほげ">
</p>
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
select.droplist {
width: 200px;
border: solid 1px #00c;
background: #cfc;
color: #c00;
text-align: center;
}
input.sample {
width: 200px;
border: solid 1px #00c;
background: #cfc;
color: #c00;
text-align: center;
}
---------------------------------------------------------------------
IE6/7、Firefox等問わず、inputの方は、ボーダー・背景色・文字色・センタリング全てのスタイルが適用されます。
しかし、selectの方は、Firefox等ではinputと同様に全てのスタイルが効いていますが、IE6/7では背景色と文字色以外は無効になっています。
※IE7ではz-indexのみ正しい挙動になる様に改良されている様ですが。IE8は未入手なので検証できていません。

仕様ですね。

【引用元】http://programming-magic.com/?id=64
「IE6では、selectタグはWindowsのコントロールを使用して表示されている。そのためか、z-indexやborder、text-alignなどいつくかのスタイルが無視される。」

例えば、下記の様なサンプルで検証した場合、
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<form action="#">
<p>
<select class="droplist" name="sample" size...続きを読む

Q▲▲テーブルと一緒には使えない?

こんばんは☆僕は今テーブルを利用してカラーコード一覧を作成しています。そこで日本語の文字を入力したのですが…<FONT size="2">Color Code一覧</FONT>と「テーブルの外に」入力すると【Color Codeˆ&ecirc;—— 】←のように表示されます…。直接【Color Code一覧】入力すると問題はありません。なぜでしょうか?わかる方教えてください☆
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</FONT size="2">Color Code一覧</FONT>
<TABLE Border Cellspacing="1"Width="20%" align="center">
<TR>
<TD><FONT size="3" face="MS UI Gothic"><DIV align="center">Collar Code・RGB</DIV></FONT></TD>
</TR>
</TABLE>
<BR>
<TABLE Border Cellspacing="1" Width="75%" align="center">
<TR>
<TD colspan="6"><FONT size="3" face="MS UI Gothic"><DIV align="center">#000000 - #00ffff</DIV></FONT></TD>
</TR>
<TR>
<TD BgColor="#000000"><FONT size="3" face="MS UI Gothic"><DIV align="center">#000000</DIV></FONT></TD>
<TD BgColor="#000033"><FONT size="3" face="MS UI Gothic"><DIV align="center">#000033</DIV></FONT></TD>
<TD BgColor="#000066"><FONT size="3" face="MS UI Gothic"><DIV align="center">#000066</DIV></FONT></TD>
~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~
</TR>
</TABLE>
</BODY>
</HTML>

こんばんは☆僕は今テーブルを利用してカラーコード一覧を作成しています。そこで日本語の文字を入力したのですが…<FONT size="2">Color Code一覧</FONT>と「テーブルの外に」入力すると【Color Codeˆ&ecirc;—— 】←のように表示されます…。直接【Color Code一覧】入力すると問題はありません。なぜでしょうか?わかる方教えてください☆
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</FONT size="2">Color Code一覧</FONT>
<TABLE Border Cellspacing="1"Width="20%" align="center">
<TR>
<TD><FONT...続きを読む

Aベストアンサー

http://homepage3.nifty.com/f-page/hp/html/meta01.html
メタタグでcharsetを設定したらどうでしょうか
文字化けしてると思います。

QIE6の仕様?Windowsをポップアップで開く時にtoolbar=yes titlebar=yesなどの設定が何故こうなるの!?

IE3.02以上で動くASPを開発しています。

Windows2000
IIS5.0
を使用しています。
ASPの使用言語はVBScript。

window.open("test.html","test","width=200,height=200")

という記述があったとすると、
IE3,4,5では普通にそのサイズのウィンドウが開き、
toolbarもmenubarもlocationbarもない画面が開かれます。

ここまでは、IE6でも同じみたいなのですが、
なぜか、IE6だとその開いた画面の最大化ボタンが使えません。灰色になって押せなくなっています。
それは、サイズ指定で開いたからなのかもしれませんが、
IE3,4,5では最大化ボタンは何もしなくても使えます。
また、開いたウィンドウのサイズを変更(リサイズ)することも可能です。特にresizable=yesの指定をしなくてもです。

ところが、IE6の場合のみresizable=yesを明示的に
指定してやらないと、最大化ボタンが使えません。
また、サイズを変更することもできません。

これは仕様なのでしょうか?IE6から仕様が
変わったということなのでしょうか?困っています。
どなたか教えてください。

width=380,height=680,scrollbars=yes,titlebar=yes,resizable=yes,location=yes,directories=yes,status=yes,toolbar=yes

IE3.02以上で動くASPを開発しています。

Windows2000
IIS5.0
を使用しています。
ASPの使用言語はVBScript。

window.open("test.html","test","width=200,height=200")

という記述があったとすると、
IE3,4,5では普通にそのサイズのウィンドウが開き、
toolbarもmenubarもlocationbarもない画面が開かれます。

ここまでは、IE6でも同じみたいなのですが、
なぜか、IE6だとその開いた画面の最大化ボタンが使えません。灰色になって押せなくなっています。
それは、サイズ指定で開いたからな...続きを読む

Aベストアンサー

自分のサイトにもJavaScriptでwindow.openを使っているので試してみました。
IE6.0です。今までの解釈ですとそれらの属性は書かなければすべてyesと判断されるべきはずなのですが、たしかに属性をyesと書き込みしないとすべてno扱いになっています。なぜなんでしょうね。ただ6.0が一般的にこうなるという可能性がありますので、すべて書いたほうがいいんでしょうね。参考にならないかもしれませんが、お許しください。


人気Q&Aランキング

おすすめ情報