Showtime

秋思工作室

专注于初中教育教学管理及初中数学教学。

导航

当前位置:首页博客技巧 > 正文页面

秋思工作室主题微调整

2017年6月3日 本文作者:秋思 浏览:

  秋思工作室现在使用的Yahei主题是自己以前参考Z-BlogASP 1.8版本的默认主题制作的,极少使用背景图片,都是用CSS代码来实现显示效果,其最大特点是整齐、简洁、大方,看着比较舒服。当年在IE9和Firefox下测试显示效果还是很好,但是现在用IE11了,发现有些显示效果就比较差了。反正闲着没事做,决定对这个主题进行微调,使页面看起来更加和谐和协调。

  由于工作的需要,以及多年养成的习惯,我平时都是使用IE浏览器。但是Yahei主题在IE11和Firefox下显示效果并不理想,主要表现在三个方面:第一是文章段落内文字两端没有对齐,特别是右侧参差不齐,体验效果是非常的差;第二是正文内文章底部Tags标签和引用通告字体效果特别大,看上去极不协调;第三是侧边栏的文字偏小,文字行间距离也偏小。这次微调整也重点针对这三个方面进行。

  通常在Firefox和Chrome浏览器下,实现文字两端对齐只需要在CSS代码中加入text-align: justify属性,但经多次测试后发现IE11并不兼容这个属性,真是太坑了。在网上搜索了无数次也没有发现特别好的方法,虽然也有借助CSS Hack来解决,但代码过于复杂,使用不方便。不过幸运的是,我借助IE11的开发人员工具无意中发现,只需要在CSS中再添加一句text-justify: inter-ideograph属性就可以完美解决这个问题了。具体写法如下:

   {text-align: justify;text-justify: inter-ideograph;}

  第二个问题相对简单了许多,仔细检查了一下CSS代码,发现没有对正文内文章底部Tags标签和引用通告字体添加控制大小的属性代码,于是在.text-foot .tags中直接添加了相应的代码,并去除了上一级属性中的控制字体大小的属性代码,顺便调整了一下文字的位置,现在看起来就正常多了。

  第三个微调就更简单,直接使用IE11中的开发者工具进行修改,这样可以实时预览。调整好了之后,直接复制这段属性代码然后替换CSS文件中相关代码即可。调整侧边栏的显示效果,只需要通过修改CSS文件中.function LI中的padding属性数值就行了。

  不过有个问题我也很纠结:直接在CSS代码中添加text-indent:2em来控制段落首行空两格的话,某些时候使用换行的话,行与行之间的文字无法对齐,需要在编辑时手动完成,但是不用这个属性的话,段落格式又显得不规范。反反复复折腾了几次后,最终决定只对文章摘要部分进行添加text-indent属性,正文不添加text-indent属性,在编辑文字时直接全角空两格。总之,这是一件令人纠结的事。

本站文章在没有加注转载说明的情况下,均为本站原创,转载请注明来源和出处。

来自:秋思工作室 | 链接:http://www.qiusi.me/post/3.html

Gravatar Icon
1秋思 于 2017/6/16 9:33:25 发表
网址:http://www.qiusi.me  回复:Reply
微软的IE实在是太坑了,只是已经用习惯了,也没有办法,只能将就着。

欢迎在此发表评论,但请勿发垃圾广告评论或者违反国家法律或政策的言论,谢谢合作!

欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

文章存档

标签

©2017 秋思工作室. All rights reserved. Powered by Z-Blog. Theme named Yahei and made free by Qiusi.

本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可.