日期:2014-05-16  浏览次数:20569 次

如何解决IE7因 position:relative;引起的递归导致页面鼠标频繁闪动?
初始布局如下
<div class="SubjectTab BlueTab" style="overflow:hidden; ">
    <div class="TabPartItemA"></div>
    <div class="TabPartItemB"></div>
    <div class="TabPartItemC"></div>
    <div class="TabPartItemD"></div>
    <div class="TabPartItemE"></div>
</div>

在IE7 中 如果 子元素中使用了 *position:relative;其父级元素也要使用 *position:relative; 才能得到想要的效果。
如上面的布局 因为 其中一个 TabPartItemA 内部元素 使用了 *position:relative,所以TabPartItemA 也要加入这个属性。
因为所有TabPartItem是并列的而且必须要在SubjectTab 元素内部,所以SubjectTab 和 TabPartItemA -E 都要加入*position:relative才能得到并排效果。
最终布局属性为
<div class="SubjectTab BlueTab" style="overflow:hidden;  *position:relative">
    <div class="TabPartItemA" style="*position:relative"></div>
    <div class="TabPartItemB" style="*position:relative"></div>
    <div class="TabPartItemC" style="*position:relative"></div>
    <div class="TabPartItemD" style="*position:relative"></div>
    <div class="TabPartItemE" style="*position:relative"></div>
</div>
现在问题来了
当我使用JS 为 SubjectTab 设置高度时,前台页面响应非常慢,并且鼠标不停的切换繁忙状态。
如果我不设置高度又得不到想要的效果,请问如何解决这个问题?

------解决方案--------------------
不明白你想说啥,你想做什么功能,遇到什么错误,你为什么要用position:relative呢,在页面布局里面,如非必要,不要用相对定位来布局。margin、padding、width、height你想怎么用都行。