Question

我有绝对的定位问题。我的网站在FF / Chrome / IE7中运行良好。在IE9 / 8中，它没有按我认为的那样做。

我的页面上有两个表单。一个位于主页面结构的底部（我只能使用asp.net webforms和braintree来完成它）。

然后我有一些CSS将表单放回到页面顶部，所以它看起来像是内联的。

#NewPaymentForm
{
    position:absolute;
    top:160px;
    left:40px;
}

这在FF / Chrome / IE7中按预期工作。在IE9 / 8中，它只是附加到我的页面底部。看起来它与另一个div相关。

我不介意为此做一个有条件的css语句，但是我无法得到任何将表单带到页面顶部的语句。

页面为www.trainerroad.com/sign-up-payment。你可以看到我在说什么。

如果有人可以给我一些CSS来将表格移到IE9 / 8中的页面顶部，并解释为什么它会很棒。

Answer 1

Nate，在您的回答中，您正在使用JavaScript浏览器检测来解决您的问题。我认为有更好的方法来定位特定的浏览器。

一种方法是使用条件评论：

<!--[if IE 6]>
... link IE 6 specific stylesheet or a script...
<![endif]-->

此方法还可以使您的页面向前兼容，以便IE的未来版本可以呈现它而无需所有IE6（和更低）样式。

另一种方式（在我看来更好的方法）是HTML5 Boilerplate方法。你用这个开始你的HTML页面......

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!-- misteroneill.com/improved-internet-explorer-targeting-through-body-classes/ -->
<!--[if lt IE 7]> <html class="no-js ie ie6 lte9 lte8 lte7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie ie7 lte9 lte8 lte7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie ie8 lte9 lte8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie ie9 lte9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]>
<!-->
<html class="no-js" lang="en">
<!--<![endif]-->
...

...然后你可以这样做......

.ie9 #NewPaymentForm, .ie8 #NewPaymentForm {
    top: 160px;
    left: 150px;
}

我希望这会有所帮助。

Answer 2

我用一些jquery修复了它：

    var browser = $.browser.version;
    if(browser == "9.0" || browser == "8.0")
    {
        $("#NewPaymentForm").offset({ top: 160, left: 150 });
    }

CSS绝对定位。 IE9 / 8 vs FF / Chrome / IE7

2 个答案: