用javascript导入CSS样式表

其中images/style.css就是要引入的css文件路径,也可以是绝对路径,例如 http://sunteng.name/images/style.css 这样。

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
       window.onload = function() {
       var l = document.createElement("link");
           l.setAttribute("type", "text/css");
           l.setAttribute("rel", "stylesheet");
           l.setAttribute("href","images/style.css");
           document.getElementsByTagName("head")[0].appendChild(l);
       }
</script>

调用css的方式

样式的使用有大体有四种方式:
1,外联式样式表;2,内嵌样式表;3,元素内定;4,导入样式表

导入

1
2
3
4
5
<style type="text/css">
<!--
@import url("css/base.css");
-->
</style>

加入X-UA-Compatible,使IE8以IE7模式显示网页

X-UA-Compatible是IE8测试时,网站如果在IE8下出现未知错误,可以使用IE7模式来显示页面。
现在的IE8的显示比IE7要好些,一般没必要用X-UA-Compatible使IE8以IE7显示页面,但是当遇到了IE8下难以解决的困难时,用X-UA-Compatible可以迅速解决问题。

注意,X-UA-Compatible是针对IE8加的一个设置,IE6/7完全不认识“X-UA-Compatible”信息。

1
<meta http-equiv="X-UA-Compatible" content="IE=7" />

无论页面是否包含 指令,都像是使用了 IE7 的标准模式。

1
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

EmulateIE7 模式通知IE浏览器使用 指令确定如何呈现内容。标准模式指令以 IE7 标准模式显示。与 IE7 模式不同,EmulateIE7 模式遵循 指令。对于多数网站来说,它是首选的兼容性模式。

1
<meta http-equiv="X-UA-Compatible" content="edge" />

Edge 模式通知 IE 以最新的IE版本模式来显示网页。

IE多版本兼容性测试IETester及DebugBar和Companion.JS

找工作,又被出题,做了一个网站的首页CSS重构,我只有IE8和Firefix3.6,看着没问题发了过去。但人家是IE6,于是几个地方悲剧的乱了。
IE6还得主流不知多少年~,又把以前刘涛推荐的IETester找出来重新装上了。
之后测试自己的网站,首页在IE6下表现的非常难看…,难道招聘的公司看到的都是这个乱乱的样子?太糟糕了,得重做一下。

IETester官方截图

IETester官方主页和最新版本下载
http://www.my-debugbar.com/wiki/IETester/HomePage
IETester 包含5个版本的IE(5.5/6.0/7.0/8.0/9.0 Preview),完全可以满足对IE兼容性的测试,再往前的版本也不支持CSS解析了,更何况也没有人再用IE3/IE4等古董级的玩意儿了。
IETester中文语言更新
http://www.my-debugbar.com/wiki/IETester/Languages
中文界面语言更新方法:打开网页,找到相应文件下载后,覆盖程序安装目录Languages下的相应文件即可。

DebugBar官方主页
http://www.debugbar.com
DebugBar是IE插件,类似于Firefox浏览器的开发者插件Firebug,从各个不同的角度剖析Web页面内部的细节层面。
DebugBar下载
http://www.debugbar.com/download.php
DebugBar中文语言更新
http://www.debugbar.com/langages-unicode.php

Companion.JS官方主页和最新版本下载
http://www.my-debugbar.com/wiki/CompanionJS/HomePage
Companion.JS,不是一个js文件,而是一个名字,它是作为IE的插件来安装使用的,而且需要结合Microsoft Script Debugger使用,通过安装这个工具,页面出现错误时会在左上角弹出一个小错误提示,点击会在IE下面显示出一个错误控制台,就如Firefox下的firebug控制台一样。错误信息提示很详细。

添加NextGEN Gallery相册插件和解决图集预览图不缩放问题

目前是1.7.0 版本,后台设置稍微繁琐,总体不错。

NextGEN Gallery
作者博客,有中文汉化包下载

插件介绍文章
WordPress相册NextGEN Gallery插件汉化及使用

更详细的应该去官方NextGEN Gallery查阅,在FAQ有调用方法和演示。

我添加“相册”页面的方法:
新建页面,在html编辑器里输入

1
[album id=1 template=compact]

建好后,需要有相册,相册里有图集,图集里有图片,才会显示。
这时候我遇到个BUG,显示的图集预览图片,无法缩放至预览框内,预览框内是91×68px,我尝试修改CSS,看到CSS里已经设定了宽高却没生效,于是直接写在了代码里。方法:
打开
/wp-content/plugins/nextgen-gallery/view/album-compact.php
找到

1
<img class="Thumb" alt="<?php echo $gallery->title ?>" src="<?php echo $gallery->previewurl ?>"/>

换成

1
<img class="Thumb" style="display:block;width:91px;height:68px;" alt="<?php echo $gallery->title ?>" src="<?php echo $gallery->previewurl ?>" />

上传覆盖原文件。

Pages: Prev 1 2 3 4 Next