OK、画像に設定された IE と 25% の幅の値に問題があります。どうすればこれを修正できますか?
IE 9 のイメージは次のとおりです。
これは、それがどのように見えるか、および他のすべてのブラウザでどのように見えるかのイメージです: (Chrome、Opera、Firefox、Safari):
これに使用しているコードは次のとおりです...
HTML :
<html>
<head>
<title>2013 Conference Test Page</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div class="header">
<div style="width: 100%;">
<img class='header_img' src='images/image1.jpg' />
<img class='header_img' src='images/image2.jpg' />
<img class='header_img' src='images/image3.jpg' />
<img class='header_img' src='images/image4.jpg' />
</div>
<div class="header_text big_text"><div>SAVE THE DATE!</div><div style="margin-top: -.2em;">2013 OFN CONFERENCE</div>
</div>
<div class="header_text" style="margin-top: -.2em;">
<p class="medium_text"><span style="padding-right: 15px;">October 15-18, 2013</span> • <span style="padding-left: 15px;">Philadelphia, PA</span>
</div>
<div class="header_text">
<p style="padding: 0px 10% 1.5em; line-height: 1.5em;">Join us for this year's conference at the Philadelphia Marriot Downtown, just steps away from historic sites, great cultural destinations, and Opportunity Finance Network's own headquarters! Registration opens in August, 2013.</p>
</div>
</div>
</body>
</html>
CSS :
html,body
{
margin:0 0 0 0;
padding:0 0 0 0;
}
.header
{
background-color: #049EAB;
width: 100%;
}
@font-face {
font-family: hnc_font;
src: url('../fonts/hnc.eot');
src: local('hnc_font'), url('../fonts/hnc.woff') format('woff'), url('../fonts/hnc.ttf') format('truetype'), url('../fonts/hnc.svg') format('svg');
font-weight: normal;
}
.header_img
{
width:25%;
height:auto;
float:left;
}
.header_text
{
width: 100%;
text-align: center;
color: white;
}
.medium_text
{
text-shadow: 1px 1px 2px black;
font-size: 1.5em;
font-family: hnc_font;
}
p
{
font-family: Arial, Helvetica, Verdana, Tahoma;
}
.big_text
{
text-shadow: 2px 2px 4px black;
font-size: 5.5em;
font-family: hnc_font;
}
検出された問題:
- 上部の 4 つの画像が画面の幅に収まりません。TBH、これは画像のサイズが縮小されるという非常に奇妙な動作です。画面の幅ではなく、表示されるたびに前の画像の 25% ずつ縮小されているようです。奇数！
- @font-face を使用した CSS へのフォントの埋め込みは、IE では機能しません。フォントは Helvetica 派生スタイルのフォントです。2 番目の写真とまったく同じように見えますが、IE 9 または IE のどのバージョンでも正しく見えません。.eot フォントを使用していますが、IE によって無視されているようです (ドキュメントによると、IE ブラウザーで動作するはずです)。
- CSS3 の text-shadow プロパティが機能していません。IE ブラウザを使用しているユーザーがこの効果を得る方法はありますか?
少なくとも、IE の問題 1 と 2 を修正するにはどうすればよいですか? 問題 #1: 代わりにテーブルを使用する必要がありますか? それが唯一の方法ですか？
編集
コードに次の変更を加えました。
HTML:
<div style="width: 100%; overflow: hidden;">
<div class="image"><img class='header_img' src='images/image1.jpg' alt="" /></div>
<div class="image"><img class='header_img' src='images/image2.jpg' alt="" /></div>
<div class="image"><img class='header_img' src='images/image3.jpg' alt="" /></div>
<div class="image"><img class='header_img' src='images/image4.jpg' alt="" /></div>
</div>
CSS:
div.image
{
width: 25%;
}
.header_img
{
max-width: 100%;
height: auto;
float: left;
}
これで、画像が横に並んで表示されるのではなく、重ねて表示されます。
いいえ:
他のすべてのブラウザ:
