Rexdf

The devil is in the Details.

建站日志

| Comments

今天主要有两个更新,对菜单进行了完整的更新,对CSS布局上的样式进行了修正(IE显示上的bug得到了修正)。

1.IE页面无限滚动

首先讲CSS修正遇到的一个奇葩的现象,之前在开启jiaThis边栏插件的情况下,IE下是可以无限向下拖动的,但是在FIrefox和Chrome下都是好的。这个问题不是太严重,页面滚动到最下面了刻意向下拖动也没意思,所以一直没解决。今天停掉多余的插件时,发现我一直都处于开启状态的jiaThis是可以关掉了,可以直接把代码写到脚本里面就好了,但是我先看了小工具,发现这里藏着一个远古的边栏插件而且它是没有显示的,果断的删掉了。然后没停jiaThis,清空了IE的缓存之后打开偶然发现居然可以滚动到最下面就停止了。于是果断的进行进一步的清理,发现了下面一行代码

<div class="hfeed" id="wrapper">

起初我是以为我在放加载动画的时候放进来的。在修改了部分CSS之后发现页面加载过程中会发生移动现象,显然这不是好的体验,固然是css文件重新定义了这个div的对齐方式了,一查是20px右边对齐,于是在代码行上也打算加上这么一行,这样虽然重复了,但是就不会抖动了。于是我改成了下面这样

<div id="wrapper" style="padding-right: 20px;">

结果在IE中那个现象又出现了,再次可以无限滚动。于是Chrome调试,发现class=”hfeed”似乎没有作任何CSS的选择器,好像就是一个多余项一样。一番搜索发现了下面这个事实。很是有趣,居然有一个预定义的类:显示有人提的问题Question About ‘ class=”hfeed” ‘  英文的参考hatom ,以及翻译过来的hAtom应用 让结构提供数据

2.多语言菜单

做的另外一件事便是多语言的导航菜单,由于支持多语言的qTranslate可以使用

<!--lang-->内容<!--:>

来区别语言,所以菜单栏进行了一下设计。可以切换语言,同时切换后又在不同的语言显示切换菜单。不过这个就像其他html标签一样会被wordpress过滤掉,所以是不能通过导入导出功能备份的,必须自己想法办手工备份。

3.整体布局进行了修改

布局上面,以前导航菜单、谷歌广告、QQ联系方式三个div采用的是以左上的绝对定位方式,显然这种方式不具有通用性,现在应该主要是基于相对定位的了,适应性更强,同时减小了导航菜单上的padding和margin值,留更多的空闲显示博客本身的内容。

4.后面打算

后期我打算写一写CSS与JS的学习笔记,同时整理下算法。

Comments