解决表单(Form)重置reset is not a function脚本出错

实际上很久之前遇到过一回,结果最近开发又遇到这个Bug,而且也折腾了我一些时间,比如说我在利用Ajax提交表单后,需要重置表单各项内容从交互上来避免用户重复提交,正常的表单HTML结构如下所示:

<form action="" method="post" id="LoginForm">
  <input type="text" name="username" value="" />
  <input type="password" name="password" value="" />
  <input type="submit" id="submit" name="submit" value="Login" />
  <input type="reset" id="reset" name="reset" value="Reset" />
</form>

继续阅读

让IE6/7/8支持CSS3 media print(Media Queries)打印样式

某个项目需要支持打印样式,测试下来Chrome和FireFox正常,唯独IE8无法应用打印样式,也就是说识别不了@media定义的CSS样式节。

网上解决的办法也五花八门,我在这里整理一下,首先我们还是要从让IE支持media的的思路开始,首先JavaScript大将出马。

1. 项目css3-mediaqueries-js

该项目由Wouter van der Graaf发起(项目地址),旨在为了提供对于类似于IE 5+Firefox 1+Safari 2低版本浏览器的Media Queries支持,使用方式也很简单,直接引用脚本即可,当然现在基本上非IE的浏览器和IE9及以上版本已经原生支持Media Queries了,所以我们可以使用IE特有的条件注释处理代码引用,比如下面的代码示例:

继续阅读

FireFox/IE(ClearAuthenticationCache)清除HTTP基本认证实现登出注销

对于HTTP基本认证我前一篇文章也有所介绍,但是一次认证后浏览器将会把认证信息保存一段时间以避免在下一次打开时再次认证,也就是说认证成功后每次请求需要认证的页面时浏览器都会附加认证信息,一般在请求头的Authorization节点,但是如果用户需要注销当前登录就略显麻烦了。

不过在IE下比尔叔叔为我们提供了一个便捷的方式,那就是JavaScript执行下面的代码:

document.execCommand("ClearAuthenticationCache")

试了下,IE下完全正常,如果说这么简单就解决这个问题的话,也太低估我们的浏览器大军了,FireFox和Chrome等非微软系的浏览器根本无视上面的代码,所以只有另辟蹊径了。

继续阅读

解决客户端AJAX脚本失效或禁用导致显示JSON的问题

今天浏览oschina.net的《网站出bug了??还是被人黑了啊??》发现的这个问题,发表评论采用了Ajax技术,但是直接提交Ajax没有起作用,导致返回了原本由JavaScript处理的JSON结果,出现这种情况多数是因为页面JavaScript加载失败或者用户禁用了脚本所致,回想到我以前的设计,有个小技巧可以解决这个问题,现与大家分享下:

基本思路就是在Ajax提交前加入自定义的HTTP请求header,然后结果处理页判断是否有这个header,如果有就说明对方是通过Ajax提交的数据,显示JSON结果;如果没有则说明Ajax没有起作用,然后就直接输出用户友好的标准结果页。

继续阅读

解决IE下自定义HTTP错误页太小不显示并导致显示默认友好错误页问题

今天研究起WordPress的评论发布页wp-comments-post.php,假如我们提交一个不是期望的评论,比如我们什么都不写就点击提交评论,然后WordPress将交由wp-comments-post.php处理,当然这次处理将以失败告终,WordPress将显示一条错误消息,比如:“错误:请填写必填项目(姓名和电子邮件地址)。”。好了,这时如果我们右击查看源代码会找到一段奇怪的字符串:

WordPress wp-comments-post.php源文件 继续阅读

判断浏览器客户端是否禁用JavaScript脚本

主流现代浏览器默认都不会禁用js脚本的,但是也有例外,除了用户主动禁用脚本外,还有就是维护模式下的安全浏览,这样会禁用页面上的js脚本。

禁用了脚本会发生什么?哦,JQuery无法使用?准确的说是所有和JavaScript有关的都无法使用。包括你上面曾经引以为豪的特效,比如AJAX、图像延时加载以及本地脚本存储等等。是不是感觉像是回到了原始社会,严重一点可能感觉像是过着盲人的生活,呵呵,不过有一点可以肯定的是未开启脚本的这部分用户少之又少,我们可以抛弃他们。你说什么?抛弃我们的客户?这怎么可以?别急,下面我要介绍的就是针对这部分用户的判断,以便于我们能够优雅的降级页面渲染来优化用户体验。

1. 使用noscript标签

这个标签貌似很久就有了,我记得第一次学习HTML的时候就已经在那儿了。不过那时很少用,见得最多的例子是用在统计代码上面,比如有下面的代码:

<script src="http://example.com/stat.js"></script>
<noscript>
  <img src="http://example.com/stat_pic.gif"
      border="0" height="0" width="0" />
</noscript>

继续阅读

解决IE7-JS导致的JavaScript Invalid argument错误

本来想让旧版本的IE6、IE7以及IE8也能应用一些新特性的,于是尝试使用了ie7-js这款兼容性脚本。关于ie7-js这个我在前面的文章中介绍过,主要是为了让低版本的IE看起来更符合标准,其修复了一些低版本IE的不符合标准的问题。

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js">
</script>
< ![endif]-->

通过上面的代码引入后,效果确实是有了,但是出现了JS错误,特别是在IE6下JavaScript会报类似下面错误:

继续阅读

全球倒计时,Internet Explorer 6 (IE6),再见!

听闻全球IE6倒计时网站中国版上线,真是个让人欢心鼓舞的消息,想必广大的网页设计师已经受够IE6的气了,是时候翻身得解放了,纵观世界,仅中国Internet Explorer 6(IE6)用户就占了近一半,所以这次全球IE6倒计时网站在中国的上线是具有标志性意义的,至少说微软官方已经在中国表态“换掉你手中的IE6吧!”,但是我们绝大多数人懂得,在中国这个特殊的环境下,IE6将会在很长的一段时间内维持一个很大的比例,所以说,作为前端人员,我们不能完全意义上的抛弃IE6,个性的做法还是不可取的,因为这将给一部分用户带来糟糕的体验,并损失这部分用户。

不过太过于钻浏览器的兼容性也是不当的,当然喜欢玩技术的除外,我们更多的是应该寻求一种优雅的降级,之所以是“优雅的”,首先这个是在不影响功能的前提下,适当的损失一些效果,比如CSS 3.0圆角层,大家都晓得IE6不支持CSS3的相关特性,那么对于一般的网页修饰,我们究竟有没有必要去用图片或者VML去追求在IE6下的表现一致呢?完全没有必要,只要不影响功能,我们没有必要将大量的开发时间耗费在产品修饰这些无伤大雅的小问题上,我们应该节省我们的时间去考虑如何将产品做得更好。之前我的博客设计曾经无聊到兼容了IE5,后来发现IE5的流量基本不存在,而且为了考虑兼容IE5已经耗费了我大量的时间,特别是阻碍了一些新技术的加入,所以为了不被一些条条框框所束缚,我干脆就放弃了IE5这类老掉牙的浏览器。

对于开发人员来说,如果你实在讨厌IE6,那么现在就在你的网站上加入提示吧,当然提示应该用委婉的语气,不能恐吓威胁用户,要记住的是用户有选择浏览器的权利,也有选择网站的权利,任何的威胁利诱,只会让你的用户迅速的流向竞争对手,微软官方已经提供了一段代码。大家可以参考一下,不过我感到不足的是,应该加上一个“不再提示”的按钮,要不用户浏览时老是看到那块醒目的提示就会感觉不舒服啦。

对于浏览器兼容,我之前已经写了多篇文章进行介绍了,大家可以猛击这里查阅

利用X-UA-Compatible定义网页在IE下的兼容状态

这个貌似是随着IE8诞生而出现的东东,具体有什么用呢?不妨先参考一下微软MSDN的《定义文档兼容性》这篇文章。说白了X-UA-Compatible就是指定IE8或者以上版本以何种模式渲染网页。

应用场景,比如说我们在IE7的情况下设置调整好网页的正确渲染方式,的确,我们的网页在IE7下看起来正常了,但是IE8的出现可能会击毁我们原先美好的设想,那就是IE7下正常,以后版本的IE肯定也正常了,其实不然,微软在发布每一款浏览器时必定会对浏览器做一些调整,往往这些调整会让我们某些定义的布局出现意料外的状况,但是大家可能不想再加班加点的去修改现有的布局来适应新的浏览器,有没有一劳永逸的办法呢?答案就是X-UA-Compatible,有了它,我们的时光可以永远停留在IE7时代,当然,这可能有些不思进取,我还是建议你在下次网站改版时做好IE8、IE9及现有版本IE的兼容工作。

如果你需要让IE8、IE9或更高版本以IE7的兼容方式渲染网页的话,请在头标签定义如下的meta元标签。

1
2
3
4
5
6
7
8
9
10
<html>
<head>
  <!-- Mimic Internet Explorer 7 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
  <title>My Web Page</title>
</head>
<body>
  <p>Content goes here.</p>
</body>
</html>

value指定“IE=5”、“IE=7”或“IE=8”可选择相应的兼容性模式。 还可以指定“IE=edge”以告诉 Internet Explorer 8 使用可用的最高级别模式。

但是对于W3C标准比较关注的童鞋可能会发现,定义meta标签的方式可能会导致HTML5标准检测不通过,或者说挨个加meta标签太麻烦,那有什么办法避免呢?其实X-UA-Compatible可以写入HTTP Response Header(HTTP响应头中),对于Apache .htaccess定义如下。

1
2
3
<FilesMatch ".(html|htm|php|aspx|asp)$">
Header set X-UA-Compatible "IE=EmulateIE7"
</FilesMatch>

对于支持ASP.NET的IIS服务器可以在web.config定义如下节点:

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=EmulateIE7" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

2012年2月6日更新

对于Nginx服务器来说只需要在配置文件中使用add_header指令就可以了,add_header指令可以加在http, server, 或者 location节中:

# 比如如下指令则在header中告知IE始终以当前最先进的方式展示页面
add_header X-UA-Compatible IE=edge,chrome=1;

使用CSS Reset让网页布局变得轻松

其实作为网页前端设计人员最大的痛苦莫过于各种各样的浏览器,不过浏览器外壳(Shell)还好,糟糕的事情是有各种牌子的浏览器排版内核(Core),这或多或少给我们网页布局带来一定的麻烦,比如说不同的浏览器对于盒子模型的理解偏差。

好吧,我们完全没有比较把大量的时间花费在兼容浏览器上面,而且做到100%的全兼容会有一定的困难,对于CSS不太熟练的设计人员来说,与其耗费大量时间调试写CSS Hack,然后制造出一个极难维护且占带宽的样式文件,还不如将时间节省下来去喝杯咖啡,喝咖啡?开玩笑,那些在不同浏览器下呈现的乱七八糟的布局难道就不管了吗?当然不是这样,其实我们可以借助于CSS Reset(也称CSS重置、CSS重设、CSS清零)。

什么是CSS Reset?简单的来说它主要实现不同浏览器下不同布局模式的统一,这样将大大有利于我们布局跨浏览器的网页。

最经典的CSS Reset莫过于下面这一句了:

1
2
3
4
* {
  margin: 0;
  padding: 0
}

什么?你也是这么写的?好吧,我以前也一直这么写,但是现在我觉得应该淘汰这种写法了,为什么呢?除了少部分浏览器不支持*通配符外,这种写法带来了另外一个问题《* { margin: 0; padding: 0; } No Longer Cool》这篇文章介绍了性能上面有影响,总之我们还是换一种方法吧:-)

现成的CSS Reset有很多,其中《CSS Tools: Reset CSS》比较不错,其将所有可能的标签列出来然后Reset样式,从而取代了* { margin: 0; padding: 0; }的写法,另外对于不支持HTML5的标签的老式浏览器,其还将这些HTML5块级(Block)标签重置为display:block。这个CSS Reset的使用方法也非常简单,只要在你写CSS时引用一下这个Reset样式就可以了。

想了解更多的关于CSS Reset的故事,可以参观淘宝UED的《Reset CSS研究(八卦篇)》

想了解不同CSS Reset的表现,我相信* { CSS:resetr }这个网站还是值得参考的。