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

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

html css

Html CSS绝对定位。IE9/8 vs FF/Chrome/IE7,html,css,Html,Css,我有一个绝对定位问题。我的网站在FF/Chrome/IE7中运行良好。在IE9/8中，它没有做我认为应该做的事情我的页面上有两张表格。一个位于主页结构的底部之外（我是如何使用asp.NETWebForms和braintree实现的…）然后，我使用一些CSS将表单放回页面顶部，使其看起来像是内联的 #NewPaymentForm { position:absolute; top:160px; left:40px; } 这与FF/Chrome/IE7中的预期一样有效。在

我有一个绝对定位问题。我的网站在FF/Chrome/IE7中运行良好。在IE9/8中，它没有做我认为应该做的事情

我的页面上有两张表格。一个位于主页结构的底部之外（我是如何使用asp.NETWebForms和braintree实现的…）

然后，我使用一些CSS将表单放回页面顶部，使其看起来像是内联的

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

这与FF/Chrome/IE7中的预期一样有效。在IE9/8中，它只是附加到我的页面底部。看起来它是相对于另一个div的

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

这一页是。你可以明白我在说什么

如果有人能给我一些CSS，让我在IE9/8中将表单移动到页面顶部，并解释它为什么工作，那将是非常棒的。

我用一些jquery修复了它：

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

Nate，在你的回答中，你正在使用JavaScript浏览器检测来修复你的问题。我认为有更好的方法针对特定的浏览器

一种方法是使用条件注释：

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

我希望这会有所帮助。

页面上有多个元素具有相同的

id

属性。例如

“containerMain”

。这破坏了你的CSS代码…这只发生在IE中，而不是在Chrome中。奇怪…当你有无效的HTML代码时，不同的浏览器会以不同的方式解析它，所以你会得到不同的结果。这就是为什么您希望HTML代码有效。FF和Chrome将显示您编写的内容。事情进展顺利。你永远不能相信IE在不同版本之间做任何正确或一致的事情。这就是我在最初的问题中所说的代码不起作用。我会使用条件注释，但我不知道正确的CSS是什么。IE8和IE9都有一个web检查器，比如Firebug和Chrome的web检查器。您应该打开它并使用这些值，直到它在浏览器中显示正确为止。然后在条件样式表中使用这些值。

<!-- 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;
}