Q&A
あ、タイトル間違ってますね。valueでなくlabelです
以下のようなhtmlをIE11、Chromeでそれぞれ表示したときの表示についてです。
html
1<html> 2<head></head> 3<body> 4<select name="test"> 5<option label="ああ">１</option> 6<option label="いい">２</option> 7</select> 8</body> 9</html>
IEでは、option label の値が表示されるのですがChrome場合はoption labelが反映されません。
・IE
↓セレクトボックスの見た目
ああ
いい
・Chorme
↓セレクトボックスの見た目
１
２
参考URL等でもかまわないので、情報提供をおねがいします。
回答2件
0
ベストアンサー
<!DOCTYPE html>がないため、HTML 5とみなされていないと思います。
投稿2017/08/09 05:49
総合スコア13749
<!DOCTYPE html>を付与して確認しました！
確かにHTML５だと、option label の値が表示できました。
そもそもHTML5でないと、option label は利用できないのでしょうか？
下記でも、URLをご提供いただいたのですが、明示されている箇所がみつかりませんでした。
【option 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/option
HTML 4でも属性自体はありましたが、DTDに「for use in hierarchical menus」とコメントしてあり、optgroupの使用を考えて作られたと思われます。
なお、Fxで表示されないのはただのバグのようです。https://bugzilla.mozilla.org/show_bug.cgi?id=40545
HTML5に加え、下記宣言も試してみました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
結果、どれでも「option labelは効く」ことが確認できました！
現行システムのDOCTYPE宣言がどう記述されているか確認中です。
進捗が出てすごく助かっています。ありがとうございます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ではダメなようです。
http://gwt.keicode.com/lang/rendering-mode.php
準標準モード(準互換モード)では表示できるようですね。
顛末です。
DOCTYPEがそもそもありませんでした。
ので、「互換モード」で描画されています。
互換モードでは、option labelは効かないのでしょうね。。。
DOCTYPEについては、↑で書いたいづれもoption labelが適用されていたので、「互換モード」の場合にどういう解析をされているか、、は諦めようと思います。さすがに今の僕では敷居が高すぎて。
でも、原因のもと、はわかりました。
ありがとうございました。
顛末です。
システムがIE6～8を実行担保しているため、今回はHTML5ではなく、HTML4のTransitionalにしました。
検証をして、option label の正常動作も確認がとれました。
ながながとありがとうございました。
より、ブレークダウンした情報をご提示いただいた、という点でベストアンサーとさせていただきます。
0
label属性よりテキストコンテンツが優先されるのかもしれませんね。（Firefoxでも同様でした）
HTML
1<option value="１">ああ</option>
【option 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/option
投稿2017/08/09 05:42
総合スコア69398
ありがとうございます！そのサイト実は見たのですが、FFで類似事象があることは確認できたのですが、Chromeについては明記されておらず、困ってここにきました。。
あなたの回答
tips
プレビュー
