何为 > DIV+CSS > 正文

w3c xhtml 1.0 strict验证的target替换

最近心血来潮，玩起了strict valid效验，检验一下自己的技术，css方面是没有任何问题了，里面有一些细节的处理非常考究功夫，这要是涉及到浏览器兼容的问题，一般来说初学者会考虑到多种css hack来做到浏览器兼容，经过我深入研究，发现其实大部分的兼容问题是css研究不到位导致，有些细节只要把握得好，可以做到完全不用css hack达到完美的兼容，当然我不能把话说满，我目前提及的主要包括ie6/ie7/firefox/opera/，少了一个mac的Safari没东西测试。

以下是我关于css兼容细节处理以及w3c效验的几点体会：

1、ie的双倍边距bug，解决方案 display:inline;

2、ie的图片下有空隙在图片的css中加 vertical-align:bottom;

以上2条常常是导致ie和ff、opera出现细小差别的原因，尤其在列表循环时，每一条ie多1-2个px，循环下来可能导致本来在ff、opera对齐的时候ie多出一大截，很可能多数人就开始写hack了，如果你深入研究其中的原理，你就会明白如何解决他。

还有一个常用的技巧就是overflow:hidden，这是专门针对ie的，有时候你会发现ie就是会多出一点高度出来，用这个能完美解决你的问题。

3、form元素仅能够包含块级元素 input元素不能直接是form元素的下一层要加div（仅针对xhtml 1.0 strict valid）这是我在通过strict效验时遇到的问题。

4、target在strict效验的替换。

为什么不能用target原因百度一下基本应该知道了，我只关心如何替换之，a的target替换也有好的答案，用rel=external和js替代，那么form的target呢，我当时就是被这个难住了，还好，被我找到一个js解决方案，老外提供的js代码，把a和form的都结合起来了，比较完美的解决了我的问题。

function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
   var anchor = anchors[i];
   if (anchor.getAttribute("href") &&
       anchor.getAttribute("rel") == "external")
     anchor.target = "_blank";
}

var forms = document.getElementsByTagName("form");
for(var i = 0; i < forms.length; i++)
{
   var form = forms[i];
   if(form.getAttribute("id") == "heweiform")
   {
      form.target = "_blank";
   }
}
}

将以上保存为external.js，用<script type="text/javascript" src="external.js">放在head区调用，然后用<body onload="externalLinks();">，然后在页面可以用

<a href="#" rel="external">代替<a href="" target="_blank">打开新窗口。

<form method="post" action="#" id="heweiform">代替<form method="post" action="#" target="_blank">打开新窗口。

只要form需要新开窗口，给它加上id="heweiform"即可。

熟悉了原理，原来标准也不难。