IE下定位垂直导航栏

被IE搞得很怒

垂直导航栏在IE下面总是不动，而且其他的排版也和Firefox下面不同

折腾了半天，终于让IE下面的垂直导航栏也不动了:)

参考随网之舞


是按照上面文章中的思路，但是blogger里面有些特殊的地方，所以改了一些东西。以下修改是基于我原来使用的导航栏做的，如果用的导航栏实现代码不同，需要作相应修改。

原理大概是:

既然ie下面不让我fix到窗口区域的固定位置，那我就自己造一个大小正好等于整个窗口尺寸的div，然后让导航栏绝对定位到这个div的固定为止。

当然，这样需要解决的问题就是，如果这个div跟窗口一样大，那么他内部应该好有另外一个带有滚动条的div，来保证所有需要的东西还是能够显示出来。

Step 1:

作一段只对IE有效的css

<!--[if lt IE 7]>
<style type="text/css">

html{
overflow:hidden;
}

body {
/*overflow:hidden;*/

height:100%;

}

#outer-wrapper
{
height:100%;
overflow-y:auto;
}

#fixed{
font-size:small;/*为了使得这个东西不会受到字体放缩的影响*/
position:absolute;
left:1px;top:20px;
width:30px
}

#fixed img{ /*IE only,解决ie下面另外一部分搞笑的问题*/
position:fixed;
margin-bottom:-20px;
}
#fixed hr{
margin-top: 16px;
margin-bottom:-2px;
}

#fixed a:hover img {/* 钉死IE下面的图像*/
left:0px;
position:relative;
top:0px;
}

#Manubar { /*隐藏另外那个垂直导航栏*/
display:none;
}

</style>

<script type='text/javascript'>
//修改分栏宽度
//<![CDATA[
document.writeln("<style type=\"text/css\">#outer-wrapper {width:" + ((document.documentElement.clientWidth)*1 - 20) + "px;}</style>");//set main width
//]]>
</script>
<![endif]-->
这个里面设定了html的overflow:hidden,也就是说，html和body就只有窗口区域这么大了。
然后在outer-wrapper里面加了overflow:auto，所以实际上仔细看会发现滚动条其实是outer-wrapper的，而不是整个整个窗体的-----blogspot会自动在outer-wrapper的前面加入一个navbar的导航栏(当然，是被我们给手动隐藏了的）

Step 2:

然后加入一个只在IE中才会出现的对象
<!--[if lt IE 7]>

<div id="fixed">
<a href="http://eerenyuanback.blogspot.com/" title="Home"><img alt="Home" src="http://eerenyuan.googlepages.com/homepage.png" /></a>
<hr/>
<a href="javascript:setTextSize(startSz+1)" title="Larger Font Size"><img alt="Font+" src="http://chenkaie.blog.googlepages.com/FontSizePlus.gif" /></a>
<br/>
<a href="javascript:setTextSize(3)" title="Default Font Size"><img alt="Font0" src="http://chenkaie.blog.googlepages.com/FontSizeOrigin.gif" /></a>
<br/>
<a href="javascript:setTextSize(startSz-1)" title="Smaller Font Size"><img alt="Font-" src="http://chenkaie.blog.googlepages.com/FontSizeMinus.gif" /></a>
<hr/>
打<br/>倒<br/>IE<br/>
</div>


<![endif]-->

这个东西貌似需要放在body的末尾部分，否则貌似会被其他东西给覆盖过去。如果愿意的话，可以用一个page element来统一管理这些只有ie中可见的东西，不过我已经习惯直接编辑那个xml文件了，所以就直接写在里面了。

至于效果，就是那个样子，开个IE试试就知道了，哈哈