Chorme,edgeブラウザは表示されるのですが、safari,IEだと表示されません。
cssファイル内の全てのbackground-imageがそうなので、コードの書き間違えではないと思うのですが、原因がわかりません。
コードは下記のような書き方で書いております。
ベンダープレフィックスを書いてみましたが、変化なしでした。
ご教示願います!
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Airbnb</title> 8 <link rel="canonical" href=""> 9 <link rel="stylesheet" href="reset.css"> 10 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 11 <link rel="stylesheet" href="style.css"> 12 <link rel="stylesheet" href="responsive.css"> 13 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 14</head> 15 16<body> 17 <!-- メインビジュアル スタート --> 18 <article class="main-v"> 19 <section class="select-box"> 20 <h1>Airbnbホストになって、暮らしをレベルアップ</h1> 21 <p>宿泊施設の内容を記入</p> 22 <!-- 選択バー×3 スタート --> 23 <form class="select-three" action="" method="post"> 24 <input type="text" autocomplete="on" list="p-list" name="place" 25 class="place" value="東京" placeholder="ロケーション"> 26 <datalist id="p-list"> 27 <option value="日本、東京都"></option> 28 <option value="東区東京塚町 日本、熊本県熊本市"></option> 29 <option value="中央区東京塚町 日本、熊本県熊本市"></option> 30 <option value="日本、新潟県上越市"></option> 31 <option value="中央区東京塚町 日本、熊本県熊本市"></option> 32 </datalist> 33 <select name="room-type" class="room-type"> 34 <option value="reserved">まるまる貸切</option> 35 <option value="private-room">個室</option> 36 <option value="shared-room">シェアルーム</option> 37 </select> 38 <select name="guest" class="guest"> 39 <option value="guest-1">ゲスト1人</option> 40 <option value="guest-2">ゲスト2人</option> 41 <option value="guest-3">ゲスト3人</option> 42 <option value="guest-4" selected>ゲスト4人</option> 43 <option value="guest-5">ゲスト5人</option> 44 <option value="guest-6">ゲスト6人</option> 45 <option value="guest-7">ゲスト7人</option> 46 <option value="guest-8">ゲスト8人</option> 47 <option value="guest-9">ゲスト9人</option> 48 <option value="guest-10">ゲスト10人</option> 49 <option value="guest-11">ゲスト11人</option> 50 <option value="guest-12">ゲスト12人</option> 51 <option value="guest-13">ゲスト13人</option> 52 <option value="guest-14">ゲスト14人</option> 53 <option value="guest-15">ゲスト15人</option> 54 <option value="guest-16">ゲスト16人</option> 55 </select> 56 </form> 57 <a class="start" href="">はじめる</a> 58 <!-- 選択バー×3 ラスト --> 59 </section> 60 </article> 61 <!-- メインビジュアル ラスト --> 62 <script src="jQuery.js"></script> 63 <script src="fitie.js"></script> 64 </body>
css
1/* メインビジュアル スタート */ 2 3.main-v { 4 width: 1263px; 5 height: 681px; 6 margin: 0 auto; 7 box-shadow: 0px -200px 200px rgba(0, 0, 0, 0.4) inset; 8 position: relative; 9 background-image: url(./img/mv.jpg); 10 background-repeat: no-repeat; 11 background-position: 0 81px; 12 background-size:cover; 13} 14 15.select-box { 16 width: 460px; 17 height: 423px; 18 padding: 35px; 19 background-color: #ffffff; 20 position: absolute; 21 top: 159px; 22 left: 711px; 23} 24 25.select-box h1 { 26 font-size: 40px; 27 font-weight: 800; 28 line-height: 40px; 29 color: #333333; 30 letter-spacing: -1px; 31} 32 33.select-box p { 34 font-size: 16px; 35 font-weight: 600; 36 margin: 30px 0 10px 0; 37} 38 39/* 選択バー×3 スタート */ 40 41.select-three { 42 margin-bottom: 33px; 43 display: -webkit-box; 44 display: -ms-flexbox; 45 display: flex; 46 -ms-flex-wrap: wrap; 47 flex-wrap: wrap; 48} 49 50.place { 51 width: 392px; 52 line-height: 44px; 53 border: solid 1px rgba(176, 176, 176, 0.3); 54 border-radius: 5px; 55 padding-left: 10px; 56 margin-bottom: 10px; 57} 58 59.room-type { 60 width: 220px; 61 line-height: 44px; 62 border: solid 1px rgba(176, 176, 176, 0.3); 63 border-radius: 5px; 64 padding-left: 10px; 65 margin-right: 18px; 66 background-image: url(./img/chevron-down-solid.svg); 67 background-repeat: no-repeat; 68 background-size: 18px 18px; 69 background-position: right 10px center; 70} 71 72.guest { 73 width: 151px; 74 line-height: 44px; 75 border: solid 1px rgba(176, 176, 176, 0.3); 76 border-radius: 5px; 77 padding-left: 10px; 78 background-image: url(./img/chevron-down-solid.svg); 79 background-repeat: no-repeat; 80 background-size: 14px 18px; 81 background-position: right 10px center; 82} 83 84.start { 85 display: block; 86 width: 396px; 87 background-color: #ea2253; 88 color: #ffffff; 89 text-align: center; 90 font-size: 16px; 91 font-weight: 600; 92 line-height: 48px; 93 border-radius: 8px; 94} 95 96/* 選択バー×3 ラスト */ 97 98/* メインビジュアル ラスト */ 99
回答2件
あなたの回答
tips
プレビュー