完美解决IE6不能兼容position:fixed

最新推荐文章于 2019-09-05 13:43:14 发布
最新推荐文章于 2019-09-05 13:43:14 发布
阅读量410 收藏
点赞数
文章标签： ie 6 bug 
<code class="hljs xml has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-doctype" style="color: rgb(102, 0, 102); box-sizing: border-box;"><!DOCTYPE html></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">http-equiv</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Content-Type"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/html; charset=utf-8"</span> /></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">title</span>></span>IE6 position:fixed bug<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">title</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span>></span><span class="css" style="box-sizing: border-box;">
*<span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">padding</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">margin</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span></span></span></span>}
<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">p</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">2000</span>px</span></span></span>}
<span class="hljs-id" style="box-sizing: border-box; color: rgb(155, 112, 63);">#gs</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">1</span>px solid <span class="hljs-hexcolor" style="box-sizing: border-box;">#000</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">fixed</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">right</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">30</span>px</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">top</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">120</span>px</span></span></span>}
</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span>></span>
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--[if IE 6]>
<style type="text/css">
html{overflow:hidden}
body{height:100%;overflow:auto}
#gs{position:absolute}
</style>
<![endif]--></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"rightform"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>11111111111111111<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">input</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"gs"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"gs"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">value</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">""</span>  /></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li></ul>

以上这段代码在网上很常见，通过设置html{overflow:hidden}和body{height:100%;overflow:auto}来实现ie6下position:fixed效果，但这种办法有个缺陷，那就是：这会使页面上原有的absolute、relation都变成fixed的效果，在这里我就不做demo了，如果有怀疑，可以自己去试验一下。

　　于是我找了下资料，发现可以通过一条Internet Explorer的CSS表达式(expression)来完美的实现ie6下position:fixed效果，css代码如下： 
　　

<code class="hljs css has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* 除IE6浏览器的通用方法 */</span>
<span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.ie6fixedTL</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">fixed</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">left</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">top</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span></span></span></span>}
<span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.ie6fixedBR</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">fixed</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">right</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">bottom</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span></span></span></span>}
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* IE6浏览器的特有方法 */</span>
* <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">html</span> <span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.ie6fixedTL</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">absolute</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">left</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">expression(<span class="hljs-function" style="box-sizing: border-box;">eval(document.documentElement.scrollLeft)</span>)</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">top</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">expression(<span class="hljs-function" style="box-sizing: border-box;">eval(document.documentElement.scrollTop)</span>)</span></span></span></span>}
* <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">html</span> <span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.ie6fixedBR</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">absolute</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">left</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">expression(<span class="hljs-function" style="box-sizing: border-box;">eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)</span><span class="hljs-function" style="box-sizing: border-box;">-(<span class="hljs-function" style="box-sizing: border-box;">parseInt(this.currentStyle.marginLeft,<span class="hljs-number" style="box-sizing: border-box;">10</span>)</span>||<span class="hljs-number" style="box-sizing: border-box;">0</span>)</span><span class="hljs-function" style="box-sizing: border-box;">-(<span class="hljs-function" style="box-sizing: border-box;">parseInt(this.currentStyle.marginRight,<span class="hljs-number" style="box-sizing: border-box;">10</span>)</span>||<span class="hljs-number" style="box-sizing: border-box;">0</span>)</span>)</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">top</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">expression(<span class="hljs-function" style="box-sizing: border-box;">eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.<span class="hljs-function" style="box-sizing: border-box;">offsetHeight-(<span class="hljs-function" style="box-sizing: border-box;">parseInt(this.currentStyle.marginTop,<span class="hljs-number" style="box-sizing: border-box;">10</span>)</span>||<span class="hljs-number" style="box-sizing: border-box;">0</span>)</span><span class="hljs-function" style="box-sizing: border-box;">-(<span class="hljs-function" style="box-sizing: border-box;">parseInt(this.currentStyle.marginBottom,<span class="hljs-number" style="box-sizing: border-box;">10</span>)</span>||<span class="hljs-number" style="box-sizing: border-box;">0</span>)</span>)</span>)</span></span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

上面代码可以直接使用了，如果要设置元素悬浮边距，要分别为设置两次，比如我要让某个元素距顶部10个像素，距左部也是10个像素，那就要这样子写：

<code class="hljs css has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* 除IE6浏览器的通用方法 */</span>
<span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.ie6fixedTL</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">fixed</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">left</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">10</span>px</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">top</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">10</span>px</span></span></span>}
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* IE6浏览器的特有方法 */</span>
* <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">html</span> <span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.ie6fixedTL</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">absolute</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">left</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">expression(<span class="hljs-function" style="box-sizing: border-box;">eval(document.documentElement.scrollLeft+<span class="hljs-number" style="box-sizing: border-box;">10</span>)</span>)</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">top</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">expression(<span class="hljs-function" style="box-sizing: border-box;">eval(document.documentElement.scrollTop+<span class="hljs-number" style="box-sizing: border-box;">10</span>)</span>)</span></span></span></span>}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

这样一来，IE6下实现position:fixed的效果解决了，而且也不会影响到其他的absolute、relation，但还有一个问题，就是悬浮的元素会出现振动

IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重画页面，这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug，在此处固定位置的元素需要调整以跟上你的(页面的)滚动，于是就会“跳动”。 
解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS，它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素！ 
　　然后我发现background-image无需一张真实的图片，设置成about:blank就行了。

　　下面附上完整代码

<code class="hljs css has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* 除IE6浏览器的通用方法 */</span>
<span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.ie6fixedTL</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">fixed</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">left</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">top</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span></span></span></span>}
<span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.ie6fixedBR</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">fixed</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">right</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">bottom</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span></span></span></span>}
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* IE6浏览器的特有方法 */</span>
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* 修正IE6振动bug */</span>
* <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">html</span>,* <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">html</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">body</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background-image</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">url(about:blank)</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background-attachment</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">fixed</span></span></span>}
* <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">html</span> <span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.ie6fixedTL</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">absolute</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">left</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">expression(<span class="hljs-function" style="box-sizing: border-box;">eval(document.documentElement.scrollLeft)</span>)</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">top</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">expression(<span class="hljs-function" style="box-sizing: border-box;">eval(document.documentElement.scrollTop)</span>)</span></span></span></span>}
* <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">html</span> <span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.ie6fixedBR</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">absolute</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">left</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-function" style="box-sizing: border-box;">expression(<span class="hljs-function" style="box-sizing: border-box;">eval(document.documentElement.scrollLef</span></span></span></span></span></code>
Zach-vip
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
IE6不兼容position:fixed属性的解决办法分享
01-21
及上下两边，共四种位置的固定，与以往的教程不同的地方是，它使用CSS表达式来兼容IE5、IE6，且避免了js模拟时，拖动滚动条时出现抖动的问题，另外在IE5或者怪癖模式下也完全正常，没有任何问题。如果你有更好的方案...
js完美解决IE6不支持position:fixed的bug
10-24
总的来说，解决IE6不支持`position:fixed`的bug需要开发者具备深厚的前端知识，包括CSS兼容性、CSS Hack以及对JavaScript表达式的理解。同时，也需要权衡性能与兼容性的关系，适时地做出技术决策，以适应不断变化的...
再谈IE6之Fixed定位
renpinghao的专栏
10-10 1434
众所周产于公元2002年、且当前为我国主流的IE6浏览器是不支持CSS2的静止定位属性fixed，蛋疼的前端工程师们为此发明了各种形式的解决方案： 一、常规js解决之道 这个方案最为古老，比IE6还老，且应用十分广泛：比如很多跟着滚动条走的对联广告就是使用此方案。缺点就是拖动滚动条元素抖动很厉害，虽然通过平滑处理可以改善下，效果仍然不理想。不过要说的是此方案虽然视觉效果差了那么一点，稳
ie6与固定定位fixed,+ 条件注释格式注意
dayanwu2842的博客
08-23 71
ie6并不支持position:fixed, ie7+都支持fixed定位， ie6固定定位实现方法1： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .top{ width:100px; height:100px; backgr...
ie6 滤镜 background-position
Tizzy_Joel的专栏
05-31 1623
ie6 滤镜 FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src=“”); sizingMethod：有三个选项 crop：剪切图片以适应对象尺寸。 image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 scale：缩放图片以适应对象的尺
解决IE6下不支持position:fixed属性
回忆的夏天
07-12 864
先弱弱的问一句，市场上还有多少项目需要考虑兼容IE6的….. * 正常浏览器和IE7+浏览器显示如下： * IE6下显示结果： 发现position:fixed属性失效，因为IE6是不支持这个属性的 解决办法： 在css样式里面加上下面这段代码: * html #menu {/*解决position：fixed不兼容问题*/ position: absolu...
解决ie6下position：absolute不兼容问题
04-12 927
body{9000px;} /*让浏览器出现滚动条*/ .fixed{ position:fixed; /*对于火狐等其他浏览器需要设置的*/ top:700px; /*同上*/ width:30px; height:30px; cursor:pointer;
IE6支持position:fixed完美解决方法
10-30
总结来说，解决IE6不支持`position:fixed`的问题可以通过创建条件注释和使用CSS表达式来实现。虽然这种方法比JavaScript事件监听更节省资源，但在现代Web开发中，考虑到浏览器兼容性和性能优化，通常会避免使用CSS...
IE6不支持position:fixed bug的完美解决
09-25
本文将详细介绍如何解决 IE6 不支持 `position:fixed` 的问题，并提供一种完美的解决方案。 首先，让我们分析一下 IE6 中的 `position:fixed` bug。在标准浏览器中，设置 `position:fixed` 可以使元素相对于浏览器...
position:absolute在IE6下导致父级盒模型不显示的解决方案
weixin_30294709的博客
03-09 34
嗯， 一个绝对定位导致父级盒模型在IE6下就是撑不开， 气人。试了很久， 发现是父级没有写position:relative导致的。 但是还没完，如果父级没有指定高度， 还是会有问题， 可以加一句：height:100% 转载于:https://www.cnblogs.com/platero/archive/2011/03/09/1978634.html...
ie6使用绝对定位position：absolute，box不显示
xfxiaoyan2010的专栏
08-08 2070
ie6使用绝对定位position：absolute，box不显示<br /> <br />今天在重构一个页面的时候，为了考虑根据内容重要程度出现的优先性，所以在css的时候为几个box书写了绝对定位，在测试的时候发现，在FF,ie8，ie7,op下都可以正常显示，可是到了IE6的时候，这几块内容是空白的了…啊！怎么回事呢？<br />经过几番折腾，总出找出毛病了，原来是因为使用绝对定位的box紧挨着的是box使用了浮动：float。哎！没办法，我的解决方法是在他们之间又单独写了一个box，这个box加了一
position:absolute绝对定位在IE6下的奇特表现
weixin_30507269的博客
07-22 41
今天闲来无事，打算系统的整理一下常用的CSS以备以后使用。结果IE6不出所料的让我再次纠结了 HTML代码： <div class=”test” style=”">ddaaaaaaaaaaaaaaaaaaaa</div> 　　 CSS代码： .test{position:absolute; top:300px;right:500px;lef...
最全position定位方式解析
weixin_37861326的博客
06-08 6457
position: 定位方式position: static; position: relative; position: absolute; position: fixed; position: inherit; position: initial; position: unset; position: sticky;通常，我们总是知道前面4种方式，突然发现原来现在有7种方式了。下面依次来解...
IE浏览器兼容问题之initial关键字
吞石鱼的博客
09-05 2315
由于IE没有initial关键字，可以尝试positon:statice。默认值。
css不兼容情况 background-position在firefox下不兼容，出现图片位置不对，的处理情况；ie6、ie7强制选择器。...
weixin_30466421的博客
04-06 152
一、只需要在样式中加入，html{height：100%;}就正常了。 二、一些情况下在有ie不兼容情况，可以用 *html (样式名称){css代码}，可以实现强制选择ie6执行的情况； 用*+html 样式名称{css代码}，实现ie7 的强制选择； 三、其他的很多不兼容只有具体出现时，在解决了。 ie调试工具：firebug、IEcollection、IETest、Httpwat...
解决IE不支持position:fixed问题
hmonkey915的专栏
02-28 4039
页面上需要一个固定位置的块，不论页面怎么滚动，始终停在它的位置，比如“返回顶部”、“给建议”、“分享按钮”、“广告”等等。css中有position: fixed;可以直接用。IE确不支持，有没有好的办法解决 评论 (1) • 分享 • 链接 • 2012-02-03 0 这个兼容性问题通常是采用JS+绝对定位方式处理 – xiaomi 2012-02-0
解决CSS position:fixed 兼容问题
最新发布
05-31
IE6不支持position:fixed属性，可以使用position:absolute加javascript实现。 ``` #fixedDiv { position: absolute; right: 0; bottom: 0; } window.onscroll = function() { var top = document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值