ＨＰ制作中。プルダウンの影を消したい

質問

ただ今ホームページ作成中です。
カッコいいＨＰにしようとあれこれ思案しています。
下記ページのような影の無いフラットな
プルダウンメニューを作成したいのですが
なかな上手く行きません。

「サイズを選択してください」と個数の選択プルダウンです。

スタイルシートを使うので しょうか。

http://jp.abercrombie.com/webapp/wcs/stores/servlet/ProductDisplay?catalogId=10901&storeId=14108&langId=-10&categoryId=12264&parentCategoryId=12275&topCategoryId=12203&productId=746649

今は下記のスタイルを使っていますが今一です。
--------------------
style="border:none;
--------------------
↑これでfirefoxでは全てフラットにいい感じなりますが、
IE8ではフォームは上手くいけますが選択項目がある場合は、
通常通り立体感が出来影が現れます。
ご存知な方、お教え頂ければありがたいです。
どうか宜しくお願いいたします。

回答No.2

outbrave · ベストアンサー

DOCTYPE宣言は、入れておられますでしょうか？

DOCTYPE宣言を入れれば、IEでもfirefoxでも同じように表示されるのではないかと思います。

お礼

outbraveさん、始めまして。
ご回答の「DOCTYPE宣言」を一行目に入れましたら
全てが上手く行きました。
「style="border:none;」の設定そのままで
いけましたので本当に助かりました。
心よりお礼を申し上げます。

回答No.3

fujillin

ご提示のサイトはCSSで指定しているようです。
手元にIE6しかありませんが、やはり影が出ますね。ＩＥはセレクトボックスのborder指定を無視するみたい。（どのバージョンまでかはわかりません）

No1様が回答なさっているように、無理に合せる必要もないとは思いますが、どうしてもなんとかしたいのであれば、これをなんとかしようという試みもいろいろあるようで、『form element skin』あたりをキーに検索してみるといろいろ出てきます。　例えば、
　http://www.dreamcss.com/2009/05/15-jquery-plugins-to-enhance-your-html.html

（↑）にあるものないもの含めて幾つか（探せば他にもいろいろあると思います）
（基本的にそのままでは表示できないので、javascriptで同様の動作を実現しながら別の要素に置き換えるという仕組みで実現しているようです）
◇NiceJForms
　http://www.lexcat.ro/nicejforms/nicejforms.html

◇jqTransform
　http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

◇tofsla_forms
　 http://maus2maus.narod.ru/

それぞれの動作は確認していませんのであしからず。

お礼

fujillinさん、ご回答有難うございます。
全て解決いたしました。
皆さんのお陰です。
本当にお世話になりました。

回答No.1

jein

各ブラウザの表示のされ方の差をゼロにすることは不可能です。
そのため、アクセスする人の環境を問わずにだいたい同じように
デザインを見せられるFlashが有効であったので普及したのです。
デザイナーズサイトなどを見ると閲覧者の環境に左右されずに
デザインを見せるためにオールFlashで構築している場合も
よく見られます。

また、同じブラウザでもMacとWindowsとLinuxではフォーム
などの見え方が異なります。OSのバージョンでも異なります。
この差異をなくすには各ブラウザの開発元がお互いに
情報公開をして表示の互換性を高めないといけませんが
現実的にそんなことは無理な話です。
ですからどこまでで妥協するかという話になります。

ブラウザの差異が出るのは仕方ないのですが、IEは
何かと独自仕様（独自タグ含む）を使いたがるので
WWWコンソーシアムが定めた規格に基づいてサイトを
構築してもIEでは表示が崩れてしまうとか、逆にIEの
機能を活かしたサイトを構築すると他のブラウザでは
挙動が異なるなど、厄介なブラウザという認識です。
今は従来のようにほとんどのサイトがIEを推奨環境とする
時代ではないのです。
実際、OKwaveのQ&Aコミュニティ（このサイトです）の
推奨環境をみると、（情報が古く更新されていないので
現状何を推奨としているのかは不明ですが）
IE6を推奨としていて、IE8を使う場合一部機能が正常に
表示されないかもしれないという文言があります。
IE8から独自仕様が追加されるなどしてIE6と互換性が
低くなったのだということがこの表記から推測できます。

FirefoxだとかChromeなどはオープンソースであることを
活かして不具合の修正への対処が比較的迅速に行われ、
更新間隔が短いのでみるみるバージョンが上がっていくのですが
旧バージョンで見えていたサイトと新しいバージョンとで
見え方が異なるとかはほとんどありません。
独自の技術をアピールするための媒体としても使われるIEと
サイトを正確に表示することを目的としている（と思われる）
Firefox、Chromeとでは表示の見え方に差異があるのは
仕方ないと言えます。

MacのSafari5とChrome8で貼られてるアバクロのサイトを
見る限りは画像を貼られているIE側のような影は見えません。
Windows 7とIE9およびChrome8の組み合わせでも同様です。

IE8固有の問題なのかどうかについては、現状手に入る
ブラウザでお使いのパソコンに入れられるものを全部
試してみるなどしないと判断できません。
それらを比較して表示の見え方がIE8だけ違うならIE8
の問題なので、閲覧者向けに「IE8はサポート外です」
などと表示して自分が意図したように見えるブラウザを使って
見てもらうしかありません。

お礼

jeinさん、有難うございました。
DOCTYPE宣言を入れれば上手く行きました。
本当にお世話になりました。

補足

jeinさん、早々のご回答有難うございます。
ご回答を拝見させて頂いていて「なるほど」と
思い当たるふしがたくさんありました。
「なるほど、そうだったんだ。」と、有難うございます。
プログラム素人の私ですが非常に勉強になりました。

参考にしたいアバクロのサイトは私のパソコンを使い、
FireFox、IE8どちらもプルダウンメニューの
影が消え非常にスッキリして見えます。

この現にアバクロが行っている影を消す手法を
何とか知りたいと思っております。

本当に素早いご回答に感謝です。
有難うございます。