質問: ### 前提・実現したいこと 現在HTML,CSSでサイト作りを行なっています。 Chromeに合わせ、CSSを適用しているのですが、safariで開くとレイアウトが崩れてしまいます。 レイアウトが崩れてしまう部分は、headerに導入している、ドロップダウンメニューの箇所で、それ以外は崩れることなく表示できています。 リセットCSSなど調べてみたのですが、詳しく分からず、質問させていただきました。 ### 発生している問題・エラーメッセージ ![chrome 画面サイズ大きめ](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/81ea98592fc6310cceec8bb7ade9caec.png) ![chrome 画面サイズ小さめ](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/5c7c85d01bc12dfc93274f1db3b91fbe.png) *safariで配置がずれる、 ![safari 画面サイズ大きめ](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/b0fed15ad61bff69c82c4c64a5b46395.png) ![safari 画面サイズ小さめ](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/9afd8eaeadbac64f0293c7e56fa838bf.png) ### 該当のソースコード ``` Home Language ▶︎ English ▶︎ Chinese Contact Home Language &nbsp▶︎ English &nbsp▶︎ Chinese Contact ``` ### 試したこと appearance: none; -webkit-appearance: none; 調べてこの2項目は試している現状です。 拙いコードで申し訳ありません、確認のほどよろしくお願いいたします。 サイトは、 smoking-area.info で出てくるかと思います。 ### 補足情報(FW/ツールのバージョンなど)
回答: safariがおかしいというよりは正しくはchromeが崩れてる状態です。 以下を追記 ``` .header-right ul li { position: relative; } .language:hover ul { left: 0; top: 25px; // ここの数値は適当に書いてます } ``` まず親に`relative`を与えて基準をつくりましょう。 次に`hover`したときに現れる子が`absolute`になっているので`top`と`left`で、基準とした親からの距離を与えましょう。 そうすると子の幅が親とおなじになってしまい改行されてしまうので、 ``` white-space: nowrap; ``` などで改行させない処置を取りましょう。 以上で動かしたい部分が動かせるようになります。 `appearance`ですがこれは`form`パーツに使うものなので、全くの見当違いです。特に何も起きません。