Maison > interface Web > tutoriel HTML > 父元素相对定位后,子元素在ie下被覆盖的问题!_html/css_WEB-ITnose

父元素相对定位后,子元素在ie下被覆盖的问题!_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2016-06-24 12:34:07
original
1339 Les gens l'ont consulté

<div id="append_parent" style="position: relative;">        <div id="zoomimglayer" style="position: absolute; padding: 0px; left: 551.5px; top: 142px;            width: 800px; height: 439px; cursor: pointer;" class="popupmenu_popup">            <img  id="zoomimg"   style="max-width:90%"                src="http://www.orico.com.cn/images/2013925141939458.jpg"  style="max-width:90%"  style="max-width:90%" alt="父元素相对定位后,子元素在ie下被覆盖的问题!_html/css_WEB-ITnose" >        </div>        <div id="zoomimglayer2" style="position: absolute; padding: 0px; left: 551.5px; top: 142px;            width: 800px; height: 439px; cursor: pointer;" class="popupmenu_popup">            <div id="dprev" title="上一张" style="position: absolute; left: 0; top: 20px; z-index: 1001;                cursor: pointer; width: 40%; height: 523px;" onclick="alert('上一张')">                <a style="top: 271.5px; position: absolute;" class="prev">上一张</a>            </div>            <!-- .main -->            <div id="dnext" title="下一张" style="position: absolute; right: 0; top: 20px; z-index: 1001;                cursor: pointer; width: 40%; height: 523px;" onclick="alert('下一张')">                <a style="position: absolute; top: 271.5px; right: 0;" class="next">下一张</a>            </div>        </div>    </div>
Copier après la connexion

以上HTML定义一个父类相对定位,子元素绝对定位。

在ie下,元素zoomimglayer2 被 元素zoomimglayer 覆盖了。而在子元素zoomimglayer2上设置background样式才管用。求前端高手指点一下啊! 
Copier après la connexion

<div id="append_parent" style="position: relative;">        <div id="zoomimglayer" style="position: absolute; padding: 0px; left: 551.5px; top: 142px;            width: 800px; height: 439px; cursor: pointer;" class="popupmenu_popup">            <img  id="zoomimg"   style="max-width:90%"                src="http://www.orico.com.cn/images/2013925141939458.jpg"  style="max-width:90%"  style="max-width:90%" alt="父元素相对定位后,子元素在ie下被覆盖的问题!_html/css_WEB-ITnose" >        </div>        <div id="zoomimglayer2" style="position: absolute; padding: 0px; left: 551.5px; top: 142px;            width: 800px; height: 439px; cursor: pointer;background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);" class="popupmenu_popup">            <div id="dprev" title="上一张" style="position: absolute; left: 0; top: 20px; z-index: 1001;                cursor: pointer; width: 40%; height: 523px;" onclick="alert('上一张')">                <a style="top: 271.5px; position: absolute;" class="prev">上一张</a>            </div>            <!-- .main -->            <div id="dnext" title="下一张" style="position: absolute; right: 0; top: 20px; z-index: 1001;                cursor: pointer; width: 40%; height: 523px;" onclick="alert('下一张')">                <a style="position: absolute; top: 271.5px; right: 0;" class="next">下一张</a>            </div>        </div>    </div>
Copier après la connexion

 
Copier après la connexion
Copier après la connexion

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal