css - IE 问题 z-index css

标签 css internet-explorer z-index

我完全糊涂了。我已经通读了针对该主题推荐的文章,但似乎仍然找不到有用的东西。

这是它应该看起来的样子: ------> 使用 FIRFOX 或 SAFARI http://lisareisman.com/tests/focusTest

然后在 IE 8 或 9 上查看它。2 个“i”图标和 iPod 标签已“重新定位”。

这是CSS:

#feature_top, feature_bottom {
z-index:1;
}

#feature_top img.info_btn {
position:relative;
float:right;
margin-top:-28px;
margin-right:165px;
z-index:2;
}

.img_overlay {
float:right;
margin-right:-15px;
margin-top: -150px;
position:relative;
z-index:3;
}

#feature_bottom img.info_btn {
position:relative;
float:right;
margin-top:-155px;
margin-right:125px;
z-index:2;
}

我有一个单独的 ie 样式表。

顶部的 html:

        <div id="feature_top">
        <img class="feature_arrow" src="img/arrow.png" alt="Feature arrow" />
            <h2>QwickPay Mobile Payment System</h2>
            <p class="top"><span class="bold">QwikPay</span> is a complete payment solution allowing your PC, Mac, IiPhone, iPod Touch, iPad or any other mobile smart phone, to evolve into a highly secure payment system. With <span class="bold">QwikPay</span>, you can easily accept credit and signature debit sales anytime, anyplace. Don't type, safely swipe and you and your customer will enjoy the convenience and peace of mind unmatched by any other secure, POS system. It is easy to use and can help merchants lower their cost of accepting cards by as much as 30%. When your customers want to pay with a card, <span class="bold">QwikPay</span> is the safest way.</p>
        <div id="feature1_img">
            <a href="#"><img src="img/qwikPaywithPhone.png" alt="" /></a>
            <a class="iframe" href="http://www.qwickpay.com/"><img class="info_btn" src="img/info_icon.png" /></a>
            <img class="img_overlay" src="img/made-for-iphone-ipod.png" />
            <div style="display: none;">
                  <a class="fancybox" href="img/setUpSale.png"></a>
            </div><!--end fancy box-->
        </div><!--end feature image 1-->
      </div><!--end of feature_top-->

非常感谢您的帮助。我已经无计可施了。我正在使用 Explorer Developer 栏,我试图将“i”图标和 iPod 标签向下推,它们靠得很近,然后向下跳过下图。

我一直回去尝试其他帖子中的建议,但似乎找不到合适的。真的很感激时间。玩得开心!!

谢谢!!!

丽莎 '我应该知道怎么做,但我不知道' l;o)

最佳答案

您可以在 CSS 中使用 IE 条件注释来解决此问题。将它们放在当前 CSS 声明的末尾以防万一(优先级)...

<!--[if IE]>
<style type="text/css">
position:absolute
top:...px
left:...px

</style>
<![endif]-->

关于css - IE 问题 z-index css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6313400/

相关文章:

Firefox 正在读取 CSS 条件 IE 语句

javascript - Z-index 问题,z-index 没有正常工作

css - 弹出窗口显示不正确

javascript - 使用文本框值更改按钮单击时的 CSS

php - 使用 codeigniter 在数据库中插入多行

css - Sass中的双重插值(变量内部变量)

html - z-index 不能正常工作

javascript - flex : 1 上下滑动功能问题

html - Internet Explorer 9 上的零星字体图标

asp.net - 任何人都有解决Internet Explorer上 “n items remaining”问题的想法吗?