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

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

WBOY
WBOYOriginal
2016-06-24 12:34:071250Durchsuche

<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>

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

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

<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>

 

 
   

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn