ひとことブログ

短文ブログです。自分のtwitterからの転載もあります。気分で長文になるかもしれません。

タブレットブラウザの<select>タグに悩まされた話

おはこんにちばんは。curoスケです。

 

実は先日、こんなWEBアプリ(?)を作りました。

http://www.curonogi-works.com/webtools/calculating.html

ただひたすら単純な計算問題を生成するだけのツールです。

もし挙動がおかしかったら教えてください。

 

で、作ったのはいいのですけど

 

PCで動作確認して問題なかったので公開して、次の日に何気なく手持ちのタブレットで開いてみたのですよ。

 

そうしたら、

 

f:id:curonogi:20140403153636j:plain

f:id:curonogi:20140403153641j:plain

 

表示がおかしいΣ( ̄△ ̄;)

 

selectボックスの中身が半分で切れちゃってます。

 

(ちなみに、DOSPARAで買ったdiginnosっていうやっすいタブレットです)

 

一応ブラウザ2種類インストールしてるので両方で試してみたのですが、どちらも同じでした。

 

まあ気づいてよかった。。。とCSSをいじってみるわけですが

 

height:auto; -> 変わらず

padding:0; -> 変わらず

heightを元の1.5倍に -> 変わらず。逆にPC側の表示が変に。

 

その他いろいろいじってみたのですが、どうも違うようで、変わりません。

なにしろPC側で異常が無いので、普段使ってる開発ツールも使えず。

うんうん唸りながらふと閃いてやってみたのが

 

border:none; 

 

すると =>

 

f:id:curonogi:20140403153644j:plain

f:id:curonogi:20140403153647j:plain

 

変わりました!(,,゜▽゜,,)

 

なるほど。。。border分がはみ出てたのね。

 

でも、こうなると右側にあった展開マーク(?)も消えちゃったので

 

border-width:0 1em 0 0;

 

としてみました。すると、

 

f:id:curonogi:20140403161000j:plain

 

 

なんでやねん(´・ω・`)

 

borderを消したら消えたんならお前(展開マーク)ボーダーやないんかい

 

しかも、なにやらborder-radiusチックなものが見えるし。。。

 

ま、まあ一応、border:none;でカタはついた、と。

深みにハマりそうなのでここらでやめときます。

 

iPadとか高級なものは持ってないので確認してないのですが、もし環境によって見え方おかしかったら教えていただけると助かります。

 

以上、自分へのメモと、もし同じ現象で困ってる方がいればと思って書きとめてみました。

ついでといってはなんですが、こちらのWEBアプリ(?)もよろしくお願いします。

http://www.curonogi-works.com/webtools/calculating.html

\(^^*)