裁纸刀下 » 浏览器

禁用Firefox自带的元素查看工具

小李刀刀 — Thu, 29 Mar 2012 17:45:03 +0000

对于web前端工程师来说，用Firefox+Firebug进行CSS和JavaScript的调试已经是非常熟悉和习惯了。如今，新版本的Firefox中又内嵌了一个元素查看工具（图1），类似Firebug，但是初步体验下来，功能远不如Firebug（图2），使用起来也远不如Firebug方便。但是右键菜单中的两个“查看元素”选项（图3），常常一不小心就按错了。这个新增的内置元素查看工具，不但没有给我带来便利，反而造成了许多不便。幸好，我们可以轻松地禁用它。

禁用新版Firefox自带的元素查看器的方法很简单（图4）：

在地址栏输入 about:config，回车
提示“这样可能会失去质保”，点击“我保证会小心”
进入Firefox配置界面后，可以在搜索框中输入 inspector ，过滤无关的项目
双击“devtools.inspector.enabled”，使其值变为“false”。

图1：firebox内置的元素查看器，可以查看HTML、CSS

图2：功能更强大、更易用的Firebug界面

图3：右键菜单里多出一个查看元素，经常会点错

图4：通过about:config高级配置，可以轻松禁用Firefox自带的元素查看器

IE8/9兼容性设置

小李刀刀 — Mon, 07 Mar 2011 02:02:43 +0000

从使用Win7测试版开始，经历了IE新版本使用中的不少兼容性问题，早期遇到的如看不了视频、论坛不能上传附件、不能使用网银、不能使用支付宝财付通等问题。经过一两年的使用下来，IE8已经成了我主要使用的浏览器之一（Chrome是我的默认浏览器、网银、支付宝、财付通及部分兼容性不好的网站用IE8），使用一直很顺畅。现在很多人开始升级IE9，希望会有更多的非前端开发人员的普通用户开始尝试IE8吧。这里把我安装完IE8（以及升级完IE9）之后必做的设置分享一下，希望能帮助一些刚开始使用IE8/9的朋友。

安装完IE8/9，第一次启动时会打开设置向导，设置不设置都可以。设置项中的基本项目说明一下：

启用选项卡浏览：这个必定启用，很多人不肯用IE而非要使用TT浏览器、遨游浏览器的主要原因是不用开启多个浏览器窗口，在一个窗口中就可以打开很多网页。实际上从IE7开始已经支持这个特性；
启用加速器：这个根据需要，我是全部禁止的，主要包括Bing地图、使用Bing搜索、使用Windows Live发送电子邮件、日志等功能，由于都有更佳的替代品，所以我不使用这些加速器，喜欢Bing的朋友可以启用。
SmartScreen筛选：针对仿冒网站的改良型保护功能，带有新的反恶意软件功能。原理是通过服务器端的特征对比识别你所访问的网站是否带有恶意软件、是否仿冒的钓鱼网站。我一直是禁用的，不过现在钓鱼网站很猖獗，如果你没办法确保自己能识别钓鱼网站，可以启用。具体效果我并不清楚，因为没有使用过。
搜索默认值：默认使用的是Bing搜索引擎，可以自由更改。IE7/8设置网站上的google默认地址是中国大陆谷歌的地址，由于google已经退出中国，每次搜索都会返回“查看xxxx在google.com.hk上的结果”，中转一次才能得到结果。这里可以使用自定义。首先打开google.com，搜索TEST，然后把结果页面的URL作为自定义搜索引擎的URL就可以了。

以上都是基本的设置，对浏览器的兼容性没有影响，下面说一下常用的兼容性设置：

关闭安全模式：

打开“Internet选项 -> 安全”选项卡，取消勾选“启用安全模式”，这是造成IE8/9兼容性问题的主要原因。勾选之后，重新启动IE会在顶部出现安全模式已关闭的提示，点一下可以选择“不再提示”。

自定义级别：

打开“Internet选项 -> 安全”选项卡（如上图），点击“自定义级别”，然后修改以下项目：

“对未标记为可安全执行脚本的Active X控件初始化并执行脚本”：默认是“禁用”，改成“提示”（解决一些没有证书或证书的正规网站的ActiveX脚本无法提示和使用的问题）；

“下载未签名的Active X控件”：默认是“禁用”，改成“提示”（同上）；

“允许Scriptlet”：默认是“禁用，改成“提示”（纯粹为了向下兼容，现在使用Scriptlet的网站已经很少）；

“在没有使用外部媒体播放机的网页上显示视频和动画”：默认是“禁用”，改成“启用”（解决部分网站的网页视频无法播放的问题）；

“允许对剪贴板进行编程访问”：默认是“提示”，改成“启用”（解决每次在页面上点击复制、或点击“复制”按钮都会弹出提示框询问是否允许的问题）；

“允许网站使用脚本窗口获得提示信息”：默认是“禁用”，改成“启用”（解决一些网站用js弹出框让你填信息的问题——比如云南信息港的聊天室）；

“将文件上载到服务器时包含本地目录路径”：默认是“禁用”，改成“启用”（解决论坛不能上传附件的问题）；

“显示混合内容”：默认是“提示”，改成启用（某些使用ssl的网页中包含有非ssl资源时就会提示，很麻烦）；

如果你是工行U盾的用户，那么在安装了工行U盾的驱动后，对浏览器安全性会做出修改，其中包括把我这里设置为“提示”的项目改成“启用”，大大增加了中流氓软件的几率，严重降低了IE安全性，实际上改成提示就可以了。当然，工行的网银很麻烦，经常是进了页面之后弹出ActiveX提示，等你同意之后，页面刷新又要你重新登录，登录之后又弹出提示……循环N次才可能正常使用，而工行U盾式的修改后，就可以正常使用。工行的行为属于典型的为了自己的方便损害用户的安全。能不用工行就别用了，招行的用户体验极佳。

CSS技巧:如何避免IE6中的"浮动下坠"【译】

小李刀刀 — Sun, 31 Oct 2010 14:05:04 +0000

原文：http://www.yuiblog.com/?p=2820

译文：http://ofcss.com/?p=1028

作者：Thierry Koblentz

尽管这种情况通常被称为"浮动下坠"或者"浮动下沉",但实际上下坠或下沉的列并不一定是浮动的……只要它比预留给它的空间更宽就有可能出现下沉。请记住这是一种特定情况下才会发生的在跨浏览器时很常见的行为——网页的某一栏太宽了，于是它下沉了。

IE 6的问题之所以突出，是因为它对 width 这个属性的支持不完整（height 也好不到哪里去）。因此，IE 6会让容器扩展以适应内容。而为这个容器设计的宽度却没法随之变宽，于是IE 6对容器宽度的自动扩展就造成了它的下沉。

通常情况下，罪魁祸首是那些无法包围的元素（比如图片、url等），但是文字样式（例如 IE 和斜体）也有可能造成这种情况。

例如，要让YUIBlog的右栏在IE 6中下沉，我只需要让右栏中的某个图片的宽度大于210px。这张图将会强迫IE 6增加右栏的宽度，这样右栏就无法再保持在左栏旁边了。

常见修复方法：

word-wrap: break-word;//强制文字截断（译注：主要针对非双字节语言，把单词强制截断）。
wbr with wbr:after {content:"\00200B"}; //针对 Opera，wbr属性代表行截断的机会。在长文字中添加wbr以便在必要时允许浏览器换行。
overflow-x:hidden;//隐藏溢出容器的所有内容。

要注意的是前两种方式只适用于文字，不能放置图片撑开容器。

已知会导致修复失败的情况

几周前，我遇到要为yahoo!财经的页面修复“浮动下沉”的bug。在现代浏览器中，一行长文字超出了容器显示在容器右侧外部（查看截图），但是在IE 6下，同样的文字造成了右栏下沉到主栏下方（查看截图）。麻烦的是，这部分内容是由外部提供，因此没办法对HTML代码进行修改。

由于这行文字是一组由逗号分隔的标签列表，因此之前提到的几种修复方法都不能满足需要。在这行文字内部任意位置强行截断当然比隐藏溢出部分要好，但这也不是可行的解决方案。

让IE 6正常显示

要让IE 6像其它现代浏览器一样显示这行文字，方法是给文字的容器的右边距设置一个负值（同时还要设置相对定义position:relative）。

效果演示

没有修正时

fix 修正以后

代码示例：

.fixMe {
  margin-right:-100px;
  position:relative;
}

负边距可以设置为任意大的值，只要大于实际所需宽度和指定宽度的差值即可。这就是我所说的放置浮动下沉的方法。设置相对定位（position:relative）的目的是让IE能够显示超出了父元素边缘的内容。

Things to consider 补充说明

这个hack能保证每一栏都呆在应该在的位置上，但是无法阻止溢出内容的容器变宽。因此你不能在该容器上应用背景或者边框样式，否则这些样式都会显示到父元素外部。下面有个截图，演示了在IE 6下使用这个方法同时设置边框和背景的效果：

webkit中BFC元素临近浮动元素时的边距bug

小李刀刀 — Sat, 30 Oct 2010 15:03:45 +0000

一直以来我们都很熟悉IE的“浮动边距加倍”的bug，并且绝大多数重构人员都已经很擅长在需要浮动时就直接绕过他。其实以webkit为核心的浏览器，包括但不限于Safari和Chrome，也有一个关于浮动和边距的bug，同样会造成布局错误。我在最近三个月的前一个月连续遭遇了两次这个bug，后两个月虽然避免了再次出现，但是直到现在才把这个bug彻底弄清楚。

触发这个bug的条件是：

在一个非浮动元素上应用overflow，且其值不为visible（这将形成一个Block Formatting Context元素）。
这个BFC元素拥有一个浮动的兄弟元素。
在这个BFC元素上应用与其兄弟元素浮动方向相同的margin。
这个BFC元素没有指定宽度值（或者指定width:auto）

当满足触发条件时，该BFC元素的另一侧的边距将不再受css控制（在webkit核心浏览器下），而是由你所指定的与浮动元素相同的边距决定，即使你在css中明确指定另一侧的边距为0或任意值也没用。具体来说，可以分为两种情况：

当BFC与浮动方向相同的边距小于或等于浮动元素占据的总宽度（width+margin+padding+border）时，BFC另一侧的边距等于所设定方向上的边距（下图前两种情况）；
当BFC与浮动方向相同的边距大于浮动元素占据的总宽度时，BFC另一侧的边距等于浮动元素占据的总宽度（下图第三种情况）。

第一种情况：main的左边距为50px，小于sider的总宽度100px，于是它右侧自动出现了50px的边距（等于margin-left）；
第二种情况：main的左边距为100px，等于sider的总宽度100px，于是它右侧自动出现了100px的边距（等于margin-left）；
第三种情况：main的左边距为150px，大于sider的总宽度100px，于是它右侧自动出现了100px的边距（等于sider总宽度）；

以上截图来自这个demo页面，你可以用Safari或者Chrome自己打开查看具体情况。

要解决这个bug，只要让前面所说的四个条件任意一个不满足即可。例如：去除BFC元素上的overflow（但是很多时候我们需要这个overflow）；或者给BFC指定宽度（但是这样就失去了main自适应宽度的优势）。

最佳做法，当overflow和margin都必不可少的时候，把BFC的margin-left改成浮动元素的margin-right。

windows 7 x64 上的Google Chrome

小李刀刀 — Sat, 23 May 2009 11:54:50 +0000

Google Chrome 是一款对CSS支持得非常好的浏览器，虽然刚刚起步的Chrome有着这样那样的缺陷，但仍然不妨碍喜欢简洁、高效的人以及对Google产品有偏爱的人们喜欢它。网页开发人员更是无法忽略这款市场份额虽小但是正在快速上升的浏览器产品。

不过，对于Windows 7 x64 版本的使用者来说，Chrome在这款未来的主流操作系统下的兼容性非常让人抓狂。因为在Windows 7 x64下你无法用Chrome查看网页，虽然安装的时候你不会遇到任何兼容性警告，更不会出现任何错误。甚至到了运行它的时候也一样，不会弹出UAC警告，也不会弹出兼容性警告，看起来就像这是一款完美支持Windows 7 x64系统的软件一样。

但是当你尝试在Windows 7 x64操作系统中的Chrome里打开一个网页的时候。你会看到遇到一个极富欺骗性的问题——之所以说它是极富欺骗性的，是因为你将看到的错误提示和导致错误的原因完全风马牛不想关。你第一反应可能会是访问的网站有问题，然后可能会想到防火墙造成了这个BUG，最后你甚至会怀疑到你的网络连接状况上。但是当你做了很多尝试之后你会发现，问题出在软件本身。只要是在Windows 7 x64下运行就会遇到这个问题。

中文互联网上关于这个问题的探讨不多，毕竟国内使用Windows 7 x64的人还不算很多，其中使用Chrome的更少，遇到这个问题并尝试解决他的更少，最后再写博客来说明这个问题可能就凤毛麟角了。我通过Google找到的这篇博文提到了 Chrome 在 Windows 7 下的兼容性，并且声称Google 发布的一个测试版本（Google Chrome 2.0.162.0）解决了这个兼容性问题，当时作者也说明了他并没有做测试。我很遗憾看到这样一篇未经测试的博文用“完美解决”这样的字眼来做标题。更遗憾的是我测试过后的结果是这个版本并没有解决这个问题，而且这个测试版的问题比已正式发布的版本更糟糕。下文我会提到用一个很简单的办法可以解决Chrome 在 Windows 7 x64下不能打开网页的问题，但是对这个新的测试版本无效，暂时我还没找到任何办法可以在这个新版本下打开网页。

所以，我接下来要说明的办法，仅限于你通过Chrome官方网站可以下载到的版本。

其实在Google的产品论坛上有非常多的人遇到并提出这个问题（来自世界各地的人），也有很多人提出各种各样的建议。我尝试了很多，其中一个有效而简单的方法是带参数运行Chrome。就是说你不用对系统或者软件做任何修改，也不需要以管理员身份运行它或者以兼容模式运行它，更不需要用到Windows 7下著名的但是目前还没什么建树的那个VPC环境下的虚拟XP系统。你只需要在Chrome的快捷方式上加一个参数即可。这个参数是：

–in-process-plugins

也就是说，在你的开始菜单或者桌面上的Chrome快捷方式上点右键，选择“Properties（属性）”，然后在“Shortcut（快捷方式）”下面找到“Location（位置）”，通常情况下默认的值是

C:\Users\daodao\AppData\Local\Google\Chrome\Application\chrome.exe

加上参数以后，把它变成

C:\Users\daodao\AppData\Local\Google\Chrome\Application\chrome.exe –in-process-plugins

参数和原始路径之间用一个空格隔开，如果原来的路径是双引号括起来的，你可以把参数加在右引号之后。保存之后，再次点击快捷方式打开Chrome，现在它一切正常了，就像是运行在Windows XP下面一样。但是如果你尝试以Windows SP3的兼容方式去运行Chrome，你不会遇到本文描述的问题，你会遇到一个另外的问题：程序完全无法运行。

希望本文能对你有用。

裁纸刀下 » 浏览器

禁用Firefox自带的元素查看工具

相关日志

IE8/9兼容性设置

关闭安全模式：

自定义级别：

相关日志

CSS技巧:如何避免IE6中的"浮动下坠"【译】

常见修复方法：

已知会导致修复失败的情况

让IE 6正常显示

效果演示

Things to consider 补充说明

相关日志

webkit中BFC元素临近浮动元素时的边距bug

相关日志

windows 7 x64 上的Google Chrome

相关日志