发现了一个IE6的2个form嵌套bug

2009-04-08 kairyou

如果网站是.net程序的话，body下面紧跟着就是一个form，因此页面出现两个form的几率很高。在做公司目前的一个项目时，发现当在网页中加进去一个form后，用ie6测试时，发现加进去的form后面的文字变成居中对齐了。比如下面的代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk" />   
  5. <style>
  6. body,div,h2,form,p{margin:0;padding:0;font-weight:400;} 
  7. body{background:#FFF;color:#444;font:12px/20px Arial;text-align:center;} 

  9. #body,#ft{clear:both;width:706px;margin:0 auto;border:1px solid #CCC;text-align:left;} 
  10. #body div{text-align:left;} 
  11. </style>  
  12. </head>  
  13.   
  14. <body>  
  15. <form>第一个form 
  16.     <div id="body">  
  17.         <div>  
  18.             <form>第二个form：这是一个神奇的Form，这个form下面的内容，IE6会居中显示，继承了body的text-align:center（#body:{text-align:left}没有起到作用）。删除这个form后，会发现ie6下下面的内容都变成正常的左对齐了。 
  19.             </form>  
  20.             此现象应该是form内又嵌套了一个form所导致。 
  21.         </div>  
  22.         <div>这里的内容,要再设置一次：#bd div{text-align:left;} ie6才会左对齐</div>  
  23.         <h2>这里的内容IE6居中了</h2>  
  24.     </div>  
  25. </form>
  26. </body>  
  27. </html>  

 由于以前接触的基本都是php的程序，从来没遇到过这样的情况，.net把body间的内容用一个form给包含了，当里面再加进去一个form后，上面描述的问题就出现了。

我想到的解决办法就是：

1、 把css里body的text-align:center;修改成：text-align /*IE5.5 only*/:center; （这里没照顾ie5.0），由于IE5、IE6都识别前面加下划线“_text-align:”这个hack，所以这个hack在这里也用不上（以前还以为加下划线只有IE6能识别）。 body加text-align:center;也就是为了让IE5实现margin:0 auto的效果。

2、狠下心把body的text-align:center删掉也能解决，但是ie5就。。可惜IE5还有极少数的人在用。。

3、<!--[if IE 6]> body{text-align:left;} <![endif]--> 或者 * html body{text-align:left;}/*IE6/ie7都识别*/

4、重设#body下面的元素，#body div, #body h2{text-align:left;} 

在实践中上面的四种方法都可能用到，个人更偏向于第三、四种方案。

 另外发现我blog的字体，在chrome下不是一般的难看啊。。。越来越不喜欢这个风格了。。不知道啥时候有空做一个。还有这两天做了一个雅黑+DejaVuSansMono的等宽字体，等宽主要是方便用vim的时候选择，还有bug 所以还不能发布，等发现没什么问题了就发布出来。主要是搜索很久都没找到雅黑+DejaVuSansMono的等宽字体，所以才萌生了自己做的想法。这个合并字体搞了很久，也搞的很郁闷，制作字体的时候CUP经常100%，终于发现我的电脑年纪不小了。。英文使用DejaVu，是因为最喜欢它的等宽字体，Consolas、Monaco、Bitstream等等好多等宽字体测试后，发现DejaVu的效果是最好的，1、l和0、o、O很容易区分（dejavu也是Bitstream出的他们很接近）。

TAG ie, css

WebDev 0 Comments 462 Views

WinXP SP3 安装IE7的方法

2009-03-10 kairyou

默认的xp sp3安装的ie都是ie6，那么像我们这类搞web前端开发的就郁闷了，还要装IE7再装IEtester。但是系统为精简版的SP3可能会安装ie7失败，摸索很久才找到原因，不过这个方法很久之前就被我发现了，一直没时间打字～下面说下我的解决办法：

访问：Windows update：http://update.microsoft.com/Windowsupdate/v6/default.aspx?ln=en，安装Windows update ActiveX Control，之后它会提示重启系统。
再安装IE7，问题就解决了。

我想原因就是系统精简了Windows update，而安装ie7首先需要这个功能所以导致安装失败。安装好ie7后再关闭Windows update即可。
我用的是SP3英文版，中文版的解决办法也都是大同小异的了。

TAG ie7

WebDev 0 Comments 490 Views

fieldset 在ie 和 firefox 下的不同

2009-01-06 kairyou

最近用php做了一个留言板，用户发布留言的form就用到了fieldset，不过发现了一个问题，就是IE下面fieldset的margin-top和margin-bottom无效，当然margin横向是正常的。

比如css里：fieldset{margin:100px auto;}那么这个fieldset在FF（包括safari等浏览器）显示是上下100px、左右居中。而IE下就是左右居中，margin的上下无效。（当然这里的ie是IE6-IE8、页面带DOCTYPE声明）。

我的解决办法就是修改fieldset内legend的margin，或者fieldset外面加一个div，然后修改这个div的margin。

顺便，这个表单也被我拿来当作练习js了，深刻的体会到：学到的理论如果不用到实践上，那永远也不会有提升。

WebDev 0 Comments 810 Views

删除重复内容行

2008-12-30 kairyou

由于要处理一个两万多行的数据，但要删除其中内容重复的行，所以找了几个方法：

1. 用sed替换重复内容，使用命令 -n "G;s/\n/&&/;/^\(.*\n\).*\n\1/d; s/\n//;h;P" "$(FilePath)" （这里是在editplus里的使用，注意$(FilePath)必须是带路径的文件名）。当然sed不需依赖editplus，可以单独使用的。优点：删除重复内容后，顺序结构不变。缺点：不支持UTF-8，处理大文件时（2w多行）就不行了。

2.使用editplus-工具-排序，勾选"删除重复"。可惜不想把内容排序，却被自动排序了。（勾选"区分位置"，好像没用？），这个效率相当快～差不多是瞬间完成的，之所以没放弃editplus，确实它的优点有很多。

3.使用一个批处理

@echo off
:: 删除重复的行，但不能保留空行
:: 对不符合变量命名规则、变量个数超过限制的文本都无法正确处理
(echo 清除重复行后的文件内容：& echo.)>str_.txt
for /f "delims=" %%i in (testText.txt) do (
  if not defined %%i set %%i=A & echo %%i>>str_.txt)
:: start str_.txt

当然也不支持utf8，效率也比较慢，处理2w多行用了1分多钟，不过排序没有改变:)。

WebDev 1 Comments 810 Views

editplus 正则删除 多行注释

2008-12-24 kairyou

editplus的正则不能用于多行，这点比较郁闷。css里面的注释，有些内容都是多行的，而且还可能包含html语句，这样的情况editplus批量删除注释就不能用了。研究了一下，提供下我认为目前比较完美的方法：

editplus删除多行注释：/*......*/的方法：
1、把全文中的“\n”全都替换成“┓”。
2、把“[<|/]/”替换成空。(删除注释里面的“</”、“//”类内容，注释里面带有"/"的话，第三步就查不到了)
3、把“/\*.[^/]*\*/”替换成空。(不加[^/]，就会波及到非注释内容)
4、把"┓"再替换成"\n"。

以上替换的时候都要勾上“正则表达式”。虽然步骤比较多，但是总算能实现替换多行了。
 

TAG editplus, 正则

WebDev 0 Comments 864 Views
Total:10212345678Next ›Last »