Question

如何在不使用<!doctype>的情况下修复HTML页面中的元素？

Answer 1

绝对或固定位置元素的关键是它的父元素（比如容器div）必须有position:relative;

例如，如果你有一个960px宽的容器div并且以页面为中心（如下所示）：

<div class="container">
   <div id="AbsolutePositionedBox">
        // Box Content Goes Here
   </div>
</div>

使其正常工作的CSS将是：

.container{
    width:960px; 
    position: relative;
    margin: 0 auto;
}
    #AbsolutePositionedBox{
        position: // absolute or fixed;
        top: // pixels from the RELATIVE parent (makes it easier to manage);
        LEFT OR RIGHT: // pixels from the RELATIVE parent;
    }

就像上面提到的TJ一样，即使用户滚动，也会保持固定定位，因为绝对位置只是相对于元素定位，并且会与其余内容一起滚动。

同样，我也总是建议使用doctype。

Answer 2

在样式（absolute positioning）中使用examples（例如position: absolute或position: fixed）：

绝对（滚动页面）：

<style type='text/css'>
#foo {
    position: absolute;
    left: 10px;
    top: 10px;
}
</style>
<div id='foo'>This is foo at 10x10</div>

或者如果您更喜欢内联：

<div style='position: absolute; left: 10px; top: 10px;'>This is foo at 10x10</div>

修正（不滚动）：

<style type='text/css'>
#foo {
    position: fixed;
    right: 10em;
    top: 2em;
}
</style>
<div id='foo'>This is foo at 10x10</div>

或者如果您更喜欢内联：

<div style='position: fixed; right: 10em; top: 2em;'>This is foo in the upper right</div>

或者如果你想通过JavaScript（因为你的问题被标记为javascript）这样做了：

var div = document.getElementById('foo');
div.style.position = "absolute"; // or "fixed" or whatever
div.style.left = "10px";
div.style.top = "10px";

偏离主题，但我总是建议使用DOCTYPE。没有一个，几乎每个浏览器都会遇到不同的怪癖。虽然您仍然可以通过DOCTYPE获得浏览器差异，但它们更少，位更少疯狂......

position：在IE中不使用doctype修复

2 个答案: