IE的标记/ css问题

Question

我有一个UI问题，在IE 6/7和8中没有正确显示剥离图形。

标记可在此处获取：http://www.jamesradford.net/ee/example.htm

如果你在firefox或谷歌浏览器中查看该页面，它应该正确显示。使用IE我会出现显示问题。谁能为我解决这个问题？

红色剥离图形应显示在主面板的右上角。

非常感谢!!!

Answer 1

首先通过添加合适的Doctype进入Standards mode。在Quirks模式下，浏览器非常不一致。

Answer 2

怎么样，你必须在#NewDesignMain里面移动.SavePeelTop：

#NewDesignMain
{
margin-top: -10px;
position: relative;
}

.SavePeelTop
{
position: absolute;
top: 0;
right: 0;
}

你必须在#NewDesignMain

内移动.SavePeelTop

Answer 3

你的标记非常复杂。 IE一般来说很古怪。保持标记简单总是有帮助的。

做类似的事情;

<wrapper>
ABC Test Another 100 200 total whatnot
<peel>
Save 29%
</peel>
</wrapper>

显然，无效的HTML只是一个粗略的草图，可以给你一个想法。然后使用CSS在包装器上设置position:relative;，在果皮上设置position:absolute; top: 0; right: 0;。然后你会很高兴进入所有浏览器。

你已经使用了比你需要更多的div，以及相当多的嵌套元素。永远记住K.I.S.S.哲学。 （保持简单，儿子）