跨浏览器测试资源大全

我们生活在一个幸福又痛苦的时代,有太多的浏览器可以使用,对 Web 开发与设计者而言,你有义务保证你的设计兼容所有主流浏览器。然而跨浏览器测试是件相当复杂的事,涉及不同的浏览器,不同的版本,不同的平台。本文介绍了 与跨浏览器兼容测试有关的大量资源。

在线测试资源

Browsershots

是一个备受欢迎的免费在线跨浏览器测试工具,包含各种平台的各种浏览器,会为你的网站截图,因为太受欢迎,所以要排队。

Netrenderer

针对不同版本的 IE 进行测试,甚至即将包含 IE9。

Browsrcamp

免费版支持 Mac 上的 Safari 3.1.2 测试,收费版本包括更多 Mac 浏览器。

Adobe Browserlab

老牌的跨浏览器测试平台。

Litmusapp

特点是,可以得到一份完整的跨浏览器兼容测试报告,免费版只限于 IE7 和 Firefox 2。

时间: 2024-11-26 15:43:35

跨浏览器测试资源大全的相关文章

跨浏览器兼容测试有关的大量资源

跨浏览器是所有网页设计师都会碰到的常见问题,当完成一个页面后,经常会要测试IE,FF等多种常用浏览器软件.有时候客户也会要求兼容更多浏览器,当电脑里没有安装这类浏览器时就会显得很麻烦,所以推荐那些为跨浏览器测试范畴的网页设计师可以阅读下本文 我们生活在一个幸福又痛苦的时代,有太多的浏览器可以使用,对 Web 开发与设计者而言,你有义务保证你的设计兼容所有主流浏览器.然而跨浏览器测试是件相当复杂的事,涉及不同的浏览器,不同的版本,不同的平台.本文介绍了与跨浏览器兼容测试有关的大量资源. 在线测试资

跨浏览器的placeholder

 如何实现跨浏览器的placeholder效果呢?  先看下效果     js代码如下:   Js代码   $('#username').placeholder({           word: '用户名', color: '#ddd', normalFontColor: '#f00', maxLen: 4, minLen: 2, errorBorderClass: 'errorBorder',           keyup_callback: function () {          

360浏览器快捷键大全

360浏览器快捷键大全,俗话说"工欲善其事必先利其器",对于经常使用360浏览器浏览网页的朋友来说孰知快捷键是很有必要的. 标签控制快捷键 切换到上一个标签 F2.Alt+↑ 切换到下一个标签 F3.Alt+↓ 切换标签 Ctrl+Tab.Ctrl+Shift+Tab 新建标签 Ctrl+T 复制标签 Ctrl+K 关闭当前标签 Ctrl+W.Ctrl+F4 关闭所有标签 Ctrl+Shift+W 恢复刚关闭的标签 Ctrl+E.Alt+Z 其他快捷键 停止当前页面 ESC 刷新当前页

跨浏览器的Flexbox:CSS Flexible盒模型3

文章简介:CSS Flexible盒模型3又简称为Flexbox.摒弃我们传统上使用的一些hack和组件,Flexbox给网络的发展带来了很多正能量和兴奋济,让我们一起把复杂的网站布局变得简易和快速. 简介 CSS Flexible盒模型3又简称为Flexbox.摒弃我们传统上使用的一些hack和组件,Flexbox给网络的发展带来了很多正能量和兴奋济,让我们一起把复杂的网站布局变得简易和快速.早前在Flexbox: fast track to layout nirvana?一文中介绍了Flex

跨浏览器监听用户输入

 在前端的开发中,我们经常面临着这样的需求,需要统计在input[type=text]或者textarea中用户输入的字数,以便给用户一些输入限制的提示,那么我们如何实现跨浏览器的监听用户在文本框的输入呢? 比如我们有如下的html结构,需要将用户在#textbox中输入的字数显示在#counter中: <textarea id="textbox"></textarea><div id="counter">0</div>

跨浏览器常用事件

//跨浏览器添加事件  function addEvent(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj.attachEvent('on' + type, function () { fn.call(obj); }); } }   //跨浏览器移除事件 function removeEvent(obj, ty

HTML5跨浏览器前端表单验证

表单验证是广大前端非常头疼的一项事务,特别是在面对复杂表单的情况下,例如某些输入框仅接受数字输入,某些字段是必填,有些项又必须满足一定输入规则--为了提供更好的用户体验,这些繁琐的需求不得不去花大量时间和代码去满足.在新的 HTML5 标准中,增加了十几个表单输入类型和特性,例如 autofocus 自动焦点,以及之前介绍过的 Placeholder 占位符.这些贴心的特性支持大大解放了前端开发人员,我们仅需使用新的标签元素或属性,就可以完成过去需要大量 javascript 代码才能完成的功能

解决Flexbox跨浏览器兼容Bug

早在2013年9月,我在测试我的Solved by Flexbox项目时,在IE10和IE11中发现了一个Bug,就是Sticky footer实际上不会粘贴在页面的底部.我花了很多时间来解决这个问题,但始终没有成功. 起初,我真的很生气.在Flexbox出现之前,如果在不知道页脚的确切尺寸情况之下,要使用纯CSS来实现Sticky Footer的效果是不太可能.Flexbox改变了这一切,可以使用CSS解决这个问题. 失望之后,我最终得出一个结论,这不是什么大不了的事情.我的意思是,从渐进增强

CSS3实现跨浏览器的圆角支持IE9,Safari,Chrome

文章简介:现在CSS3已经可以轻松实现跨浏览器的圆角效果,包括Firefox高版本,IE9,Safari,Chrome等高端浏览器. W-教程博主就比较喜欢圆角的盒子模型,现在CSS3已经可以轻松实现跨浏览器的圆角效果,包括Firefox高版本,IE9,Safari,Chrome等高端浏览器. 我们这样去定义一个盒子模型: -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px; 在Firefox,和Ch