下記のコードは背景画像に文字と文字の背景に透過の白色を使っています。
ただし、IE11だと下記の画像のように下に隙間がかなり空いてしまいます。
IE11でも他のブラウザと同じレイアウトにするにはどうしたらいいでしょうか?
IEではheightはおかしな挙動をすると聞いたのでなるべく多用しないようにしてみました。
レスポンシブに対応するためにwidthやpaddingにvwの単位の数値をつけています。
<HTML>
<!-- main_box --> <section id="main_box"> <p><span class="title_span">TEST PAGE</span><br> <span class="eng_title_span">テストページ</span></p> </section> <!-- main_box -->
<CSS>
#main_box { width:100%; height:300px; background-image:url("../img/test.jpg");/*W1400px X H300px*/ -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; display: -webkit-flex; display: flex; } #main_box p { margin-top:40px; text-align:center; background-color: rgba(255,255,255,0.7); margin-bottom:40px; width:50vw; padding-left:25vw; padding-right:25vw; } #main_box .title_span { font-size:6vh; color: #43A1E1; font-weight:bold; } #main_box .eng_title_span { font-size:4vh; font-weight:bold; }
「試したこと」
#main_box p { margin-top:40px; text-align:center; background-color: rgba(255,255,255,0.7); margin-bottom:40px; width:50vw; padding-left:25vw; padding-right:25vw; }
こちらのCSSに下記を追加しましたが変化がありませんでした。
padding-bottom:-5vw;
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/07/24 07:10