почему картинки уходят в IE6 ~ 7 в этом HTML-код? - PullRequest
Новая
       3

почему картинки уходят в IE6 ~ 7 в этом HTML-код?

0 голосов
/ 17 января 2011

почему в этом HTML-коде картинки пропускаются в IE6 ~ 7?

Просмотреть код онлайн на: 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>

1 Ответ

0 голосов
/ 15 апреля 2011

Я заметил, что в Chrome, FF и IE эти изображения расположены в разных местах. Кроме того, вы используете метки тегов. Собираетесь ли вы использовать тег формы?

Это может быть хорошим началом, http://jsfiddle.net/AuFgK/1/

...