标签归档:Chrome

IE宣布开源项目:为Chrome开发工具引入IE适配器

在过去的几个版本中,IE浏览器本身已经自带debug工具了,它可以像firebug一样帮助开发人员调试页面样式和JS等问题,你可以通过F12或者Visual Studio开启调试器。然而,为了更便捷于人们对最新Web应用的开发,今天,我们郑重宣布一个开源项目,即IE适配器。我们正致力于打造一个促进跨浏览器更广泛和多样化开发工具的生态系统,目前我们已经把这项计划锁定在IE11,当然,在未来的版本中我们也会持续更新。

当前的浏览器基本上都已经支持WebDriver,使测试框架标准的机制来实现自动化浏览器。开发人员可以将一个新浏览器添加到他们的测试矩阵,从而降低开发成本。鉴于这点,我们也要开发一款第三方工具,以方便地嫁接于其它任何浏览器中,IE诊断适配器就是要将这成为可能,通过提供允许IE许可的远程调试协议的桥梁,便可以使用Chrome等第三方工具来调试IE下的网页了。虽然这还不是一种标准,而是由很多流行的开发工具组成,比如Adode支架。但是社区也正在做这方面的倡导,比如”Kenneth Auchenberg’s RemoteDebug”,就是常见的跨浏览器协议,这已经为IOS版的Firefox、Safari提供了桥梁。

今天,我们的适配器仅提供了部分API。您可以在Chrome开发工具中运行IE来调试脚本,还可以启动代理访问http://localhost:9222 如图所示:

 

适配器还处于积极的开发阶段,你可以在Github上关注我们的进展。我们采用的是MIT协议,你可以随便查看和贡献代码。

该适配器对我们而言是一项实验,我们会尽早公开分享。在我们从工具厂商收到的反馈中,基本上都对Chrome远程调试协议非常地感兴趣。之所以说这是实验,是因为这意味着我们不用对未来5年做出一些类似宏伟的计划,我们只是希望人们在开发网站的过程中能尽可能地愉悦,一方面可以改善我们的工具,另一方面以IE和Spartan项目为切入点,为他人打造出真正碉堡的工具。

艾玛呀,IE终于开窍了,业界良心啊!

ie6/ie7/ie8/ie9/ie10+和firefox和google chrome等一票浏览器hack方式整理

看标题就可以感觉到随着浏览器家族的不断膨胀,随之而来的前端开发兼容处理也貌似愈加复杂,嗯!貌似愈加复杂,其实整理一下也只是换汤不换药,今天整理两套hack方式,个人喜欢第二种,但是要先介绍第一种。

一.嵌入式hack方式(不推荐)

所谓嵌入式hack就是最早被人们所使用的方式,在此只整理ie的hack,其余一票高级浏览器同入口式hack方式

_width: 100px;     /ie6/
*+width: 100px;    /ie7/
*width: 100px      /ie6、ie7/
width: 100px;    /ie8/
width: 100px\9;    /ie6、ie7、ie8/
/* 由于本人不喜欢这种hack所以没有继续测试ie9+浏览器hack */

二.入口式hack方式(推荐)

优点,入口处控制,各个浏览器hack代码耦合性低,便于维护,说白了就是看着舒服,想看实例就看0101后花园首页源代码

首先在源代码中将原有的<html>进行如下替换:

<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->

然后css代码如下,我想你一看就能理解,不做解释

.box {
    background-color: white;    /所有浏览器/
} 
.ie6 .box {
    background-color: brown;    /ie6浏览器/
}
.ie7 .box {
    background-color: green;    /ie7浏览器/
}
.ie8 .box {
    background-color: blue;     /ie8浏览器/
}
.ie9 .box {
    background-color: pink;     /ie9浏览器/
}
.ie .box {
    background-color: #CAF4ED; /所有ie浏览器/
}
@media all and (min-width:0) {
    background-color: black;   /非ie6、7、8的其余高级浏览器/
}
@media all and (-webkit-min-device-pixel-ratio:0) {
    background-color: red;     /Google Chrome、Safari等一票webkit内核浏览器/
}

入口式hack方式的优雅想必大家已经领会了吧^-^Y

 

-webkit-text-size-adjust:none;解决Chrome下字号不能小于12px的问题

出于人道主义先放出解决方案:

给html添加css样式:html { -webkit-text-size-adjust:none; }

Google Chrome出于好意在中文版中默认强制字体最小为12px,无论设置10px还是11px都按照12px显示,因为当汉字小于12px的时候形状扭曲,已经不适合淫类阅读。

可但是!但可是!这阻挡不了那些奇葩设计湿必须要你把一个8px的“繁”字摆在页面上,所以Chrome提供此方案以救你于水火之中!

可但是!但可是!这样设置之后会有一个问题,就是当你和Ctrl滚页面的时候,正常情况下字体应该会随着变大变下,而设置 -webkit-text-size-adjust:none;后,字体只会显示你当前设置的字体大小,不会随着网页放大而变大了,这样对有需要放大网页观看的用户造成了不好的用户体验,所以不建议全局应用该属性,而是在需要的情况单独使用就好了。