wordpress导航栏IE6的兼容问题,以及IE6IE7错位偏移(浅谈改主题之辛苦)

正在很努力的加载中...

更多wordpress相关教程、资源免费分享请关注wordpress相关

——醉风云博客-笑看人生千帆过,独我一世醉风云

经过整整一个星期的时间,从19号开始到现在,我做了两件事情。换了域名和站名,以及把知更鸟主题彻彻底底的改头换面(其实还未修改完毕,以后逐步完善),感觉真的好辛苦。好几晚上都3点才睡觉,闹得身子终于彻底感冒了。鼻塞眼热嗓子疼的,打算今后再也不通宵玩电脑了(除了假期)。

其实11月份的时候我已经完善了一款主题,自我感觉很不错,弄完后还自然而然的兼容了IE6,不得不佩服自己。那个主题也是改自前几年很旧很旧都不能兼容wp3.0,的主题,我几乎每个文件都进行了修改。当时候他的导航拉,包括友链什么的都不能在后台直接添加,还得通过改代码,在文件里一个连接一个导航的添加,大部分后台设置的东西都不能。所以修改难度比较大。修改完之后感觉对WP以及php和css又有了更新的认识和了解。大家可以看下演示地址   我原先是准备换成那个主题的,但是那是一款纯CMS主题,适合门户站。所以我还是决定对复杂以及难度很大的知更鸟主题进行修改。

wordpress导航栏IE6的兼容问题,以及IE6IE7错位偏移(浅谈改主题之辛苦)

这两款主题如果最终都成型了,我可能会打算分享给大家。不过聪明的你,自己也会做出更好的主题,我就暂时不献丑了。这款主题我主要修改了导航以及页脚。增加了整体主页面宽度,增加了侧边栏宽度,变圆角为方脚,修改了侧边栏样式以及一些小区域小块的样式,增加了侧边滑动块,增加了半透明效果,精简了主题代码,修复了IE6和7的错位问题和半透明无效问题。

这些修改看起来都是小修小补,但是难度很大,修改一个小脚都可能会使知更鸟主题大动干戈。不信你可以试试。牵一发而动全身。知更鸟主题文件很多,之所以不能集合在一个文件夹而要分开也是有其原因。之前说过,代码多,会增加搜索引擎的攀爬难度,尤其是冗余代码。所以这些代码在逐步的完善中必须一一剔除。主题精简而功能齐全,才是一款称得上好的主题。修改主题最难的就是导航和页脚了。刚开始会有点麻烦,因为知更鸟的导航和页脚全部都在wrapper之内,并且导航全是一些图片以及一些很繁琐的代码,header文件还很多,有6个,由于其做了限制,所以要想修改必须从wrapper中挪出来,挪哪些,怎么挪,需要加些什么class层,都是很复杂。

接下来言归正传,说一下我设置导航栏时候遇到的兼容问题。改完之后我发现,IE6导航栏下方高度超出,然后下拉菜单向右偏移50PX左右,IE7导航高度不超出了,,但是下拉菜单依旧向右偏移。由于我刚开始不太懂,所以大费周章。错位如下图:点击图片放大

wordpress导航栏IE6的兼容问题,以及IE6IE7错位偏移(浅谈改主题之辛苦)

关于IE6和ie7的兼容性问题的相关知识以及解决办法,我就不多说了,网上很多,IT很精通的你也很懂,关于清除浮动,最大高度最小高度兼容问题,高度100%的兼容问题,左右偏移问题,ie6自动增加尺码的小聪明问题….我都不一一详细说了,这些都是我所遇到的问题。我也试过了很多种解决方法,大部分都已经通过查找资料修改代码解决了,这里我只说明几点,最简单的和最有意思的几点。

1、解决透明问题,可以添加如下代码兼容各大浏览器:如设置90%的半透明  opacity: .9;
filter: alpha(opacity=90);
-moz-opacity: .9;

2、解决下拉菜单向右偏移问题,最简单的方法:以margin和向右偏移50px为例

可以使用IE6的CSS Hack来解决。在CSS的中的margin: 0;后面加入:_margin:0 0 0 -50px; (IE7的CSS hack是:*margin:0 0 0 -50px;)

3、解决导航条父层class增高问题,这个我试过N种方法始终未解,据我初步判断是由于子class浮动问题,但是清除浮动等等或者添加最小高度最大高度或者添加超出部分自动隐藏之类的代码都不见效还有副作用,这个可能和知更鸟本身的主题有关。所以我刚开始就放弃了常规解决办法。

之后苦思冥想,超出部分是黑色的,所以才影响了美观,如果它是透明的呢?是不是就没关系了?所以我想出一个好办法,把导航条背景直接用图片代替背景色。所以我截取了部分导航,上传,然后把背景去掉颜色单单改成图片横向重复。之后会发现我成功了。但是高度依然超出,会出现很高一段空白。然后我用上面提到的IE6的CSS Hack果断解决了问题。大功告成了,我感觉很有成就感。不过可能有网络不好的时候导航条显示会有点慢吧,图片总会比颜色加载慢。不过不是很影响。下面是我的做法

 把父级层的class的css背景果断改成

background: url(http://www.zuifengyun.com/wp-content/themes/…..jpg); background-repeat: repeat-x;

然后在wrapper的css添加margin-top: 15px;后面添加_margin-top: 0;

ps:不能用CSS Hack来修改导航条,应为修改后你会发现白忙活一场,应为导航条移动会带动导航以下部分随着移动,所以果断把导航的margin-bottom: 15px;剪切然后在wrapper的css添加margin-top: 15px;,然后在添加_margin-top: 0;

其他的兼容问题我就不说了,因为我修改过程中其他的都比较容易。所以在此,本文告一段落。以后还会继续和大家探讨相关问题。

不说了,又不早了,感冒还没好,明天还早起去火车站接人呢,就睡就睡。

文章出自:http://www.zuifengyun.com/ie6-ie7-dislocation.html 版权所有,除注明外皆为原创。文章仅为作者个人观点,不代表醉风云立场。

正在很努力的加载中...

关于本文作者:HuiSir

建站爱好者,互联网评论家,网页视觉设计师

  1. 兼容一直是设计中的重难点,我们这些苦逼的站长只是为了迎合众多浏览器的不同要求,世界不统一,民不聊生。。。。

    • 那就别管了,毕竟不是主流浏览器,现在用IE6的几乎没有了

  2. 我现在用的是ie7想换回ie6可是老出现问题ie7就是卸载不干净,装不了6博主有什么好办法没?

    • 额…不知道你那个地方站,..你发来我待会在加吧。
      不可能卸载不干净。不想用IE6测试网站的话就装个IETester中文版,支持全部版本IE

      • 当然可以。呵呵,昨天居然有人说我文章不是原创,所以百度收录为1,我火大的丫。我刚换域名。当人收录为1,我90%是原创,擦哪只眼睛看我文章不是原创…看http://www.zuifengyun.com/bulletin/links 你的链接已经做好,需要的话及时加我链接

        • 文章是你原创的=。=但是百度不这么认为…… 😯 因为内容页与百度数据库里面的某一页面(应该是你的旧域名没用301,导致曾经收录过,但现在被百度认为是重复内容,拒绝收录) 😕

        • 而且百度你也是懂的,虽然301了,但是很长一段时间还是停留在审核期,百度收录的准确数据请参考“百度统计”或“百度站长平台”中的索引数目(site语句只是显示放出的内容,而索引数目则是真正收录的页面)。

        • 如果不信可以看看我博客,我也刚改完域名,旧域名的收录尚可,新域名仅收录一个页面。 :mrgreen: