分类： HTML

关于web结构静态代码技术研究

主浏览器CSS HACK(IE6,IE7,IE8,IE9,Chrome,FF)

三月底,在匆匆找到工作后,立即开始了新的生活,在和程序员简单的交接后,开始了程序员的职业生涯.

昨天在对公司新做的专题页面制作工程中,我仔细的测试了IE6,IE7,IE8,Chrome,Firefox兼容性,发现没有问题,上传至服务器,刚发布完成,有同事说有个地方标题换行了,我走过去一看,的确是的,不过十分好奇的是IE9,居然会跟Chrome等浏览器解析效果不同.于是我回到我的办公桌查阅了一些关于IE9方面CSS HACK的文章.现在总结如下:

其实关于IE6,IE7,IE8的CSS HACK方式我想大家耳熟能详了,这里就不复述了,需要查看的话可以参考下面的CSS HACK文档,这里我主要说明一下IE9的做法.

你可以通过给某个样式前面加个:root,例如:

:root #element { font-size: 24px; } /* IE9 */

最后附上一篇摘自网络的关于CSS hack 文档:直接查看或下载(内含CSS HACK兼容表以及一些简单的兼容性技巧)

最后献上我经过反复测试的源码,大家也可以试试,不过注意css书写的顺序,免得出现问题.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ie9 css hack sample</title>
<style>
#element {
	font-size: 30px;
}
#element {
	font-weight: bold\9;/* IE */
}
#element {
	*font-size: 14px;/* IE6+7, doesn't work in IE8/9 as IE7 */
}
#element {
	_font-size: 10px;/* IE6 */
}
#element {
	font-size: 18px\0;/* IE8+9  */
}
:root #element {
	font-size: 24px;/* IE9 */
}
</style>
</head>

<body>
<div>
	<p id="element">IE font should be bolded</p>
	<p id="element">IE6 font size should be 10px</p>
	<p id="element">IE7 font size should be 14px</p>
	<p id="element">IE8 font size should be 18px</p>
	<p id="element">IE9 font size should be 24px</p>
	<p id="element">Other should be 30px</p>
	<em>This is a simple example for IE9 CSS Hack by <a href="/about">whidy</a>.</em>
</div>
</body>
</html>

http://jsfiddle.net/kingterrors/LQhEr/embedded/result,html,css/

当然有人会说,要用这么多不同的浏览器进行测试,尤其是IE9不支持XP,很麻烦,其实对于XP用户我推荐你们用Adobe的一个BrowserLab功能,之前也有过介绍,大家自己去看看,当然有装IE TESTER的朋友也可以测试多个不同的浏览器,不过XP依然不能用此软件测试IE9的效果,所以如何在XP下测试IE9的效果,那么只有用Adobe的BrowserLab,当然必须是在线的.如果大家有其他XP下测试IE9的CSS的办法欢迎发邮箱一起讨论.

最后上一张BrowserLab在线测试截图.

IE9CssHack和BrowserLab测试
IE9CssHack和BrowserLab测试

如有错误欢迎大家指正!~

PS: 随着时间的推移,对于IE9, IE10以及IE11的hack越来越不好用了,实际上,对于IE9以上的版本就不建议hack了.尽量按照WEB规范标准来做,一般是不会有错的.(2014年5月19日22:52:40)

列表中最后一个元素样式清除修改方法(jQuery)

我们在做动态网站的时候,当遇到导航条的栏目列表或某区域内文章列表等含有大量重复内容区域时,通常会用循环将他们输出,而他们节点的样式都是相同的,比如下边距,外边框的分隔样式,通过循环输出的结果就是最后一个节点依然保留着所有的样式我们是不希望他有下边距或者外边框.

例如: 导航上每个栏目标题(li)右侧可能会用竖线分隔每个栏目标题,于是最后一个栏目右侧也出现了不想要的竖线,但是这些同级的li都是循环出来的 ,我们无法单独给最后一个元素添加特殊的样式,本来有个很简单的方法,那就是使用CSS3的:first和:last选择器,但是当IE6和IE7不支持:first和:last选择器的,有个简单的方法,通过Js(本文用的jQuery)去除或修改列表或循环内容的第一个和最后一个节点的样式,可以兼容所有浏览器,是比较方便的,其实用js可以轻松实现,但是我后来发现,jQuery来处理或许更加轻松些,也是正好我最近在学习jQuery,的确很好用.在body内最后加上一小段就可以了,比如下面这个简单的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LastChildStyleRemove</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#mainContent {background-color:#eee;}
#mainContent ul.nav {list-style:none;font-size:12px;}
#mainContent ul.nav li {float:left;padding:5px 15px;border-left:1px solid #fff;border-right:1px solid #ddd;}
#mainContent ul.nav li a {color:#666;text-decoration:none;}
</style>
</head>
<body>
	<div id="mainContent">
		<ul class="nav">
			<li><a href="#">导航一</a></li>
			<li><a href="#">导航二</a></li>
			<li><a href="#">导航三</a></li>
			<li><a href="#">导航四</a></li>
		</ul>
		<div style="clear:both;"></div>
	</div>
</body>
<script>
	$("#mainContent ul.nav li:first-child").css("border-left", "none")
	$("#mainContent ul.nav li:last-child").css("border-right", "none")
</script>
</html>

这个例子除了用到最后一个元素样式清除,也用了首个元素样式清除,这个很好理解,这是两个方法,其实只用到一个函数css( propertyName , value  ),而关于元素选择器可以查看jQuery的例子::first-child Selector和:last-child Selector.上面的例子也很简单清晰易懂…

当然我也在网上看到有这样的javascript写法,不过相对较为复杂,内容如下:

<script language="javascript" type="text/javascript">
  function addClassName(tag,classname){
   if(!tag.className){
    tag.className=classname;
   }else{
    tag.className+=" "+classname;
   }
  }

  function addFirstChild(){
   var olitems=document.getElementsByTagName("ol");
   var ulitems=document.getElementsByTagName("ul");

   for(var i=0;i<olitems.length;i++){
    addClassName(olitems[i].getElementsByTagName("li")["0"],"first-child");
   }
   for(var i=0;i<ulitems.length;i++){
    addClassName(ulitems[i].getElementsByTagName("li")["0"],"first-child");
   }
  }
  function addLastChild(){
   var olitems=document.getElementsByTagName("ol");
   var ulitems=document.getElementsByTagName("ul");

   for(var i=0;i<olitems.length;i++){
    addClassName(olitems[i].getElementsByTagName("li")[olitems[i].children.length-1],"last-child");
   }
   for(var i=0;i<ulitems.length;i++){
    addClassName(ulitems[i].getElementsByTagName("li")[ulitems[i].children.length-1],"last-child");
   }
  }

  if(document.all && !window.opera){
   window.onload=addFirstChild;
   window.onload=addLastChild;
  }
 </script>

如果有兴趣可以尝试,至此,大家也发现实际上用jQuery并不困难,用好就有讲究了,不过最好还是打好js的基础,下次我将介绍另外一个简单的效果,关于用jQuery控制下拉菜单悬浮,我用了一个很笨的嵌套方法,有空我在写一下.今天就写到这里希望大家能有所收获.

PS: 其实这个例子就是简单介绍了jQuery的两个用法,如果动态脚本支持判断首尾元素的话,其实直接在HTML内写个判断(例如:phpcms文章列表循环不同样式制作方法),给首尾元素加个class=”first-tag”和class=”last-tag”之类的样式也是不错的选择,实际上现在已经不推荐这样的写法,因为你会发现有很多冗余的小代码,维护十分不方便,这里也就是举一反三,大家视情况来写吧( update: 2014年5月17日 )