0
IE6〜7の画像がこのhtmlコードで表示されるのはなぜですか？IE6〜7でこのHTMLコードの画像が表示されるのはなぜですか？
ビューコードをオンラインで：ここhttp://pastehtml.com/view/1cu043k.html
か：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head><title>test</title>
<style type="text/css">
/********************** Reset CSS ************************/
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*********************Main CSS***************************/
/***********************Option Panel***********************/
.OptionPanel {
clear: right;
/*float: right;*/
zoom:1;
}
.OptionPanelContextGroup {
float: right;
clear: right;
zoom:1;
}
.OptionPanelContext {
float: right;
clear: right;
zoom:1;
}
.OptionPanelContextButton {
clear:right;
float:right;
zoom:1;
}
.OptionPanelPictureGroup {
text-align: center;
float: left;
zoom:1;
}
.OptionPanelBigPicture {
width: 400px;
height: 300px;
/*clear: both;*/
margin-top: 1px;
margin-bottom: 3px;
margin-left: 5px;
margin-right: 5px;
zoom:1;
}
.OptionPanelSmallPictureGroup {
zoom:1;
}
.OptionPanelSmallPicture {
width: 131px;
height: 98px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 3px;
zoom:1;
}
.OptionPanelLeftSlideShow {
direction: ltr;
float: right;
zoom:1;
}
.OptionPanelDownSlideShow {
direction: ltr;
clear: both;
float: right;
zoom:1;
}
/*****************************Others*************************/
.display-label {
float: right;
width: 150px;
clear: right;
height:20px;
}
.display-field {
width:230px;
float: right;
height:20px;
}
.InfoBox {
zoom:1;
margin-left:5px;
margin-bottom:10px;
padding: 10px;
/*clear: both;*/
border: 1px solid #FFFFFF;
background-image: url(../img/template/infobg.png);
-moz-border-radius: 5px;
float: right;
/*opacity: 0.85;
background-color: Black;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
filter: alpha(opacity=85);*/
}
</style>
</head>
<body>
<div class="InfoBox" id="PersonalInfoDIV">
<div class="OptionPanel">
<div class="OptionPanelContextGroup">
<div class="OptionPanelContext">
<h3>text</h3>
<hr />
<label class="display-label">text</label>
<label id="teamname" class="display-field">a</label><br />
<label class="display-label">text</label>
<label id="drivernumber" class="display-field">b</label><br />
<label class="display-label">text</label>
<label id="carnumber" class="display-field">c</label><br />
<label class="display-label">text</label>
<label id="matchnumber" class="display-field">d</label><br />
<label class="display-label">text</label>
<label id="winnumber" class="display-field">e</label><br />
<label class="display-label">text</label>
<label id="loosenumber" class="display-field">f</label><br />
<label class="display-label">text</label>
<label id="profileuserscore" class="display-field">g</label>
<div class="OptionPanelContextButton">
<button type="button" onclick="ShowSendMessageDialog()">text</button>
</div>
</div>
<div class="OptionPanelPictureGroup" >
<div class="OptionPanelSmallPictureGroup">
<img class="OptionPanelSmallPicture" id="userphoto" src="1.jpg" alt="pic2" />
</div>
</div>
<div class="OptionPanelContext">
<hr />
<h3>text</h3>
<hr />
<label class="display-label">text</label>
<label id="sponsername" class="display-field">h</label><br />
<label class="display-label">text</label>
<label id="sponserslogen" class="display-field">i</label> <br />
</div>
<div class="OptionPanelPictureGroup" >
<div class="OptionPanelSmallPictureGroup">
<img class="OptionPanelSmallPicture" id="sponserphoto" src="2.jpg" alt="pic1" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
あなたはDOCTYPEにもかかわらず、癖モードに落下していないことを確認していますか？それはIE6/7の奇妙さの任意の数を引き起こす可能性があります。 – Spudley
httpによる<！DOCTYPE HTML PUBLIC " - // W3C // DTD HTML 4.01 Transitional // EN">および<！DOCTYPE HTML PUBLIC " - // W3C // DTD HTML 4.01 // EN"> ：//webdesign.about.com/cs/doctype/a/aaquirksmode.htmしかし問題は残ります – farhad2161