Windows10のpcでHP作成をしてChromeでは正常に画像が表示されるのにIeでは表示されません。
Ieの設定を見るとMicrosoft Edge 44.18362.449.0
Microsoft EdgeHTML 18.18363
@2019Microsoft
となっています。
最初のimgのclass名headerimgが表示されません。
下のimgのclass名header_tellとheader_contactの画像は表示されます。
画像のプロパティを見るとディスク上のサイズheaderimgは24.0 KB (24,576 バイト)、header_tellは4.00 KB (4,096 バイト)、header_contactは4.00 KB (4,096 バイト)です。
重さが関係しているのでしょうか?
htmlです。
<body> <div class="box1"> <img class="headerimg" src="images/%E3%81%82%E3%81%84%E3%81%AF%E3%82%89%E6%AD%AF%E7%A7%91%E5%8C%BB%E9%99%A2-header_01.jpg" alt=""> <div class="box1_inner"> <div class="site"> <h1 id="home"><a href="#">あいはら歯科医院<br><span>AIHARA DENTAL CLINIC</span></a></h1> </div> <div class="header_info"> <div class="header_01"><a href="tel:0222886116"><img class="header_tell" src="images/%E3%81%82%E3%81%84%E3%81%AF%E3%82%89%E6%AD%AF%E7%A7%91%E5%8C%BB%E9%99%A2_05.png"></a></div> <div class="header_02"><img class="header_contact" src="images/%E3%81%82%E3%81%84%E3%81%AF%E3%82%89%E6%AD%AF%E7%A7%91%E5%8C%BB%E9%99%A2_10.png" alt=""></div> </div> <nav class="menu"> <ul> <li><a href="#home">ホーム<br><span>Home</span></a></li> <li><a href="#contact">お問い合わせ<br><span>Contact</span></a></li> <li><a href="#access">アクセス<br><span>Access</span></a></li> <li><a href="#medical">診療について<br><span>Medical</span></a></li> <li><a href="#opentime">診察時間<br><span>Opentime</span></a></li> </ul> </nav> </div> </div> <body>
以下がCSSです。
@charset "utf-8"; /* ======================================== リセットcss ========================================= */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-style:normal; font-weight: normal; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } html{overflow-y: scroll;} blockquote, q {quotes: none;} blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;} input, textarea{margin: 0; padding: 0;} ol, ul{list-style:none;} table{border-collapse: collapse; border-spacing:0;} caption, th{text-align: left;} a:focus {outline:none;} div#test { text-align: center; position: absolute; top: 0; opacity: 0.5; } /* micro clearfix */ .cf:before, .cf:after { content: " "; display: table; } .cf:after {clear: both;} .cf {*zoom: 1;} /* フォント */ body{ margin: 0; padding: 0; font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; color: #000000; width: 100%; height: auto; } /* 左右の余白 */ .box1_inner,.box2,.box4_inner,.box5,.box6_inner{ padding-left: 50px; padding-right: 50px; margin: 0; } .box1_inner,.box2,.box4_inner,.box5,.box6_inner{ vertical-align: bottom; clear: both; } /* ヘッダー */ /* ヘッダー画像 */ .box1{ position: relative; padding-bottom: 30px; } .headerimg{ width: 100%; height: 200px; display: block; margin: auto; right: 0; left: 0; } .site{ margin: 0; padding: 0; width: auto; } .site h1 a{ font-size: 45px; text-decoration: none; color: #333232; font-weight: 600; } .site span{ font-size: 15px; display: block; margin-left: 40px; } /* ヘッダー画像とテキストを重ねる */ .hederimg{ position: relative; } .site h1 { position: absolute; top: 10%; width: 100%; } .menu ul{ position: absolute; right: 8%; } /* お問い合わせの設定 */ .header_info{ display: flex; flex-direction: column; display: block; } /* お問い合わせをヘッダー画像に重ねる*/ .header_info{ position: absolute; top: 0; right: 5%; padding: 0 10px 0 10px; background-color: rgba(255,255,255,0.8); } /* ナビゲーション */ .menu ul{ margin-top: 10px; padding: 0; width: auto; } .menu ul li a{ font-size: 20px; text-decoration: none; padding: 15px; display: block; text-align: center; color: #333232; font-weight: 600; } .menu ul li a:hover{ color: #eeeeee; } .menu ul li a span{ font-size: 12px; display: block; } .box1:after{ content: ""; display: block; clear: both; } .site h1{ float: left; } /* ナビゲーションを横に並べる */ .menu ul:after{ content: ""; display: block; clear: both; } .menu li{ float: left; width: auto; } /* ナビゲーションを右端へ移動 */ .menu ul{ float: right; }
他に必要な情報があれば申しつけ下さい。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー