Tagged

IE

A collection of 17 posts

IE

css透明度的一些兼容测试

前言 网站丢给了外包公司来弄,但是老外写css的时候似乎没有考虑到国内的浏览器市场,于是只用了opacity这个属性来写,当IE8-的浏览器访问的时候,浮动层就像一块大黑斑药膏贴在哪里。很显然,婀娜多姿的模特被黑色药膏挡住了,用户完全感觉不到药膏下的她是有多么秀色可餐,因此也没有点击“性趣”去点击这条新闻了。所以必须来修改,让婀娜多姿的图片有种朦胧美。 我们希望起码IE7+的效果都是这样 这只狗有点丑,它在微博上求助各路PS大神,请它玩坏 代码进行时 HTML代码如下: <li> <img src="" alt="" /> <p></p> </li> css代码如下 .item li { position: relative; width: 240px; height:

HTML

meta标签常用属性整理

在segmentfault看到这篇文章,觉得整理的很详细,所以转载过来和大家分享一下。 原文地址:http://segmentfault.com/blog/ciaocc/1190000002407912 作者:ciaocc 版权贵ciaocc所有,转载请注明版权。 概要 标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 —— W3School 必要属性 属性值描述contentsome text定义与http-equiv或name属性相关的元信息**可选属性** 属性值描述http-equivcontent-type / expire / refresh / set-cookie把content属性关联到HTTP头部。nameauthor / description / keywords / generator / revised / others把 content 属性关联到一个名称。contentsome text定义用于翻译 content 属性值的格式。### SEO优化 参考文档 页面关键词,每个网页应具有描述该网页内容的一组唯一的关键字。

IE

IE BUG相关文章集合

Haslayout IE Haslayout 详解 haslayout “HasLayout” Overview 你了解IE的haslayout(拥有布局)吗? 详说 IE hasLayout Block formatting contexts Block formatting Block Formatting Contexts(块级格式化上下文) 详说 Block Formatting Contexts (块级格式化上下文) IE bug The CSS Box Model css盒子模型(box model) margin加倍bug 3px bug 文字溢出bug(注释bug) IE下图片空隙BUG CSS背景图片重复加载BUG 设置比较小的(1px/2px)高度bug ie6的!important 奇偶数bug

IE

10月26日,让我们一起黑了ie

老外好无聊,又整了一个网站,来推动大家消灭旧版本的IE浏览器,不过与以往不同的是,这次行动建议在10月26日那天统一进行,只上线一天。这有点儿像之前的CSS 裸奔日活动。 其实现在笼统的说IE好还是坏是很不客观的,IE的最新版本一直还算比较给力的,所以IE的最大问题是IE6做的太好了。 我们一直在推动IE版本的新陈代谢,微软自己也在推动,不过似乎效果并不好——前端观察甚至用”买不到火车票”来诅咒IE6用户,所以现在已经很少有人用IE6访问前端观察了。。。xd 这种中国特色的奇葩现象,通过这两年和很多人聊,好像也不难解释——用户根本就不知道什么叫浏览器,甚至,很多很多的人,没有hao123就不知道怎么上网。 这是因为中国人的学习能力太弱还是上学时老师教的太搓了? 好吧,不吐槽了,我知道大家毕业后基本上都不看书学习的。。。 回到正题 http://godarkforie.org/网站主导了这次活动,建议通过提供一个蒙板图片来让用户升级浏览器,表现就是黑色的IE的LOGO。 嗯,好吧,老外的目的是黑掉IE9以下的IE浏览器版本——我们能消灭IE6就感谢郭嘉了。。。 具体做法可以用条件注释,或者js判断,没什么技术难度,大家自由发挥。。。 另外,WebRebuild也有一个消灭IE6的方案。

css3

IE10将增强对HTML5和CSS3的支持

Windows 8 终于发布了,虽然现在可用的只是开发者预览版,好消息是,IE 10 也随着发了,虽然现在还只有Windows 8可用。我们来看下IE10都有哪些新特性吧。 IE开发者中心给到了一份详细的针对前端开发者的文档,列出了IE10支持的HTML5和CSS3新特性。嗯,它终于跟上了: CSS3 css region css3多列 Flexbox grid 定位浮动(positioned float) 3D变换(3D transfrom) 动画(animation) 渐变(gradient) text-shadow 去掉样式表限制——在IE9之前的版本中,每个页面最多只能加载31个样式表文件,@import也只能最多嵌套4层,IE10中去掉了这些限制。 HTML5 - 脚本同步——script标签的async属性,用来定义脚本是否异步执行 - File API - History - Parsing -

css3

Opera 11.10正式版以及IE10 pre版本发布

前几天发了篇文章预告Opera 11.10版本的发布,Opera效率还是很高的,两三天一个 snapshot版本,昨天正式版终于发出来了。差不多同时,IE10 预览版也发了。我们简单的看一下吧。 Opera 11.10对HTML5和CSS3的支持,和前一篇文章中提到的基本一样,不再多说,值得注意的是,正式版增加了对HTML5 File Api的支持,详情请查看Opera官方的文档。 IE团队貌似也想发力了,IE9刚发布不久就搞下一个版本的IE了,是想让人看到一点点希望么?但是IE的作风是,从来不会让前端开发人员省心的。 IE10 pre中的新特性列表: 支持兼容模式(x-ua-compatible) 支持ECMAScript 5 strict模式 支持渐变,支持此背景,而且引入了-ms-linear-gradient和-ms-radial-gradient以及-ms-repeating-linear-gradient和-ms-repeating-radial-gradient等私有属性。 支持CSS3多列(multi-column) 支持CSS3 Flexbox,悲催的,又是私有的display:-ms-box,以及-ms-box-xxx属性 支持CSS3 格栅(grid),嗯,还是私有的属性,display:

css3

IE9 beta对HTML5/CSS3的支持

IE9beta版本已经发布几天了,我也在第一时间体验了下,但是由于时间的问题,这篇日志一直没有发,嗯,最近比较忙,其实主要是没有大块大块的时间了,然后碎片时间利用的也不是很高效~~以至于最近博客的更新都比较慢… 有人说IE9是微软的二次革命,我觉得这种说法一点都不过,从IE6开始,IE的更新就没有这么彻底过,完全支持DOM level 2,完全支持CSS2.1,界面更精简……当然,我们最关心的是,IE9对HTML5和CSS3的支持到底怎么样~~ 在微软自家的ietestcenter网站中,我们看到了这个图表: 看到这个图我感到鸭梨很大啊,心里在想,IE9有这么牛x吗?认真看了说明之后才清楚,原来这里的测试项目只是微软提交给W3C的条目,并不是完整的内容,比如CSS3中,这里只包含了5项技术,而不是所有的CSS3内容——强烈的BS一下微软,差点上他的当了…… 其实,想要了解一个浏览器对HTML5/CSS3的支持很简单,上篇文章中介绍的Modernizr就是一个非常好的工具,我这里偷个懒,直接用访问findmebyip,即可看到IE9beta对它们的支持: IE9对CSS3新特性的支持: 可见,目前IE9beta对CSS3新特性的支持还是很弱的。 IE9对CSS3选择器的支持: IE9终于比较完整的支持CSS选择器了! IE9对HTML5新特性的支持: IE9beta对HTML5新特性的支持也是不完整的,音视频的支持非常弱,

IE

IE之短

在实际的网站开发中,我们经常会发现IE浏览器对资源的限制,这让人很郁闷,在不了解的时候,会浪费我们很多时间去捉虫。现在我们将IE对页面资源的限制列出来,在开发中避免这些限制。 最多只支持引入3层@import CSS文件; 最多只支持@import 32个CSS文件(使用link引入与此相同,可以查看这个测试页面,第5个测试值得注意); 使用Data URi的时候,最多支持32K的base64编码(仅IE8,IE6和IE7不支持Data URi); URL长度最大2048个字符; 每个style标签或css文件的选择符个数不能超过4095(参考秦歌的这篇文章,很多地方以为IE对CSS文件大小限制是288KB,秦歌的这个测试否定了这种说法); 不能下载大于2GB的文件(貌似IE8解决了这个问题); 最多支持总共300个cookies; 每个域名最多允许20-50个cookies(IE6允许20个,IE7在打补丁后可以使用50个),(其它浏览器也大都有限制,比如Opera限制30个,Firefox限制50个,而safari/webkit没有限制); 只能读取最多4096个字节的cookies,写入超过5118字节的cookies头会出错。 应该还有其它限制,欢迎补充。

让IE6更快的走向灭亡
IE

让IE6更快的走向灭亡

最近关于浏览器的最重要的事情就是IE的极光0day漏洞了,这个漏洞导致包括Google在内的多家美国公司受到黑客的攻击,当然也有很多色情网站被黑客利用,从而使用户受到严重的攻击,而IE6用户首当其冲,成为该漏洞的最大受害者。 其实我们天天在想到底哪一天IE6才会真正死去,但是从2001年发布以来,IE6一直统治着国内的浏览器市场,直到现在还占据着国内50%以上的浏览器市场份额。 但是我想,无论你是普通用户还是网站开发人员或者是国内的浏览器开发者,我们都应该采取一些措施,共同促进IE6的灭亡。 如果你是IE6的忠实用户,请尽快升级你的IE6 给你一个升级IE6的理由?好吧: **你和你的公司正在受到安全威胁。**这个没有更好的理由来反驳了吧?就连国际知名的大公司如Google、yahoo等都因为使用IE6而受到严重攻击,还有哪家公司的IE6不会受到攻击呢? **世界上各国政府都在建议大家升级浏览器。**在IE6的0day漏洞被曝光之后,德国、法国和澳大利亚等国政府纷纷号召国民放弃使用IE6; 就连微软自己都建议你放弃IE6。微软安全研究与预防博客发文称,IE6受0day漏洞影响最为严重,IE8基本不受该漏洞影响。事实上,微软也不止一次号召用户升级浏览器。 **这不是IE6的最后一个严重安全漏洞。**IE6从发布到现在不知道出现过多少严重的安全漏洞,而这次远不是终结,它还有至少144个漏洞! **微软在2014年之后将不再对IE6提供支持。**2014年很久远吗?或者你相信2012年就是世界末日? **IE6对web标准的支持缺乏。**IE6的技术还是10年前的,互联网技术经过10年的发展已经能够发生了巨大的改变,网站前端技术在不断进步,更先进的CSS、HTML和Javascript等技术已经能给用户带来更好的体验——而IE6用户将无法体验这些先进的内容。比如,前端观察用到的一些CSS3特性将无法在IE6甚至是IE8中体验到。

css3

在IE中使用高级CSS3选择器

别误会,IE是不支持CSS3高级选择器,包括最新的IE8(详见《CSS选择器的浏览器支持》),但是CSS选择器的确是很有用的,它可以大大的简化我们的工作,提高我们的代码效率,并让我们很方便的制作高可维护性的页面。 然而IE对高级CSS选择器特别是CSS3选择器的支持让我们一直不能将CSS选择器推广应用。不过,虽然我们无法左右浏览器的市场份额,却可以通过一些技术改善我们的工作。我们也可以使用其它的一些技术,让IE可以变相支持CSS3选择器。 一位来自英国的网页开发工程师Keith Clark开发了一个JavaScript方案来使IE支持CSS3选择器。该脚本支持从IE5到IE8的各个版本。 用法 你只需要下载Robert Nyman的DOMAssistant脚本和ie-css3.js并将它们在你的页面的head标签中导入,如下: 支持的选择器 :nth-child :nth-last-child :nth-of-type :nth-last-of-type :first-child :last-child :only-child :first-of-type :last-of-type :only-of-type :empty ie-css3的一些限制 样式表必须通过标签引入。页面级的样式表或者内联的样式表将无效。不过你可以在外部样式文件中使用@import 导入其它样式文件; 样式表文件必须和页面放在同一个域名下面; 使用file://路径的样式文件将由于浏览器的安全问题而不起作用; :not()选择器尚不支持; 该方法不是动态的,样式被应用之后再改变DOM,将会无效。 如何工作的?

css3

IE9初窥:支持CSS3,和HTML5?

微软昨天在其2009年专业开发者大会上展示了下一个版本的Internet Explorer浏览器IE9。 尽管只是一个早期版本,IE开发团队还是比较高调的宣布了IE9的一些改进,比如速度比之前的IE版本都更快些,缩小与FF和webkit之间的差距(也就是还是赶不上了?),支持CSS3的一些新特性,比如圆角(border-radius),不过现在还不清楚是原生支持还是使用私有属性-ms-border-radius。可喜的是,IE9已经可以支持大部分CSS 选择器了!IE开发团队展示了IE9在css3.info的一个CSS选择器的测试页面的测试结果,结果如下图显示: 测试结果显示,IE9支持43个选择器中的41个(另外两个中一个有bug,一个不支持),在578项测试中通过了574项,这是IE浏览器历史上最大的进步…… 虽然微软之前宣布将支持HTML5,但是此次IE开发团队并未给出一个明确的答案,据说,关于是否支持HTML5,他们还在讨论中…… 另外在Windows 7中引入的direct2D和directWrite等GPU硬件加速技术,也将在IE9中使用。 好吧,事实上,从泄漏出的这些信息可以看出来,IE9相对于IE8,无论在速度还是性能,以及对网站标准的支持,都有很大很大的进步。但是我们或许可以预见:将来某个时候发布的微软的IE9浏览器,已经远远落后于现在的firefox和chrome/safari了! 但是无论如何,前端观察都会一直关注微软的动静,毕竟大蛋糕在人家手里——这是一个杯具…… 欲了解更多信息,可查阅IE团队博客的介绍。

bug

IE bug: 1像素的dotted/dashed边框

最近的一个页面中碰到的,本来想用 border 来模拟设计图的虚线效果,但是很明显 border 效果不如设计图来的好看。顺便研究了下 dashed 和 dotted 的区别。 首先,从字面上来理解,dashed 和 dotted 都是指“虚线”,他们的不同在于: dashed:来自 dash(破折号),由 dash 组成的虚线 dotted:来自 dot (点),由 dot 组成的虚线,也称点线 这里多说几句废话,其实参看下 demo,就能从视觉上获得更直观的感受了。 下面再说说相关的 bug 吧,当然了,这些 bug 再一次只是光荣地出现在了 IE 下,此处涉及到 IE6

css

CSS在Internet Explorer 6, 7 和8中的差别

中文原文:[CSS在Internet Explorer 6, 7 和8中的差别](http://www.qianduan.net/css-differences-in-internet-explorer-6-7-and-8.html) 译自:[CSS Differences in Internet Explorer 6, 7 and 8](http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/) 版权所有,转载请注明出处,多谢!- - - - - - 关于浏览器的最离奇的统计结果之一就是**Internet Explorer** 版本6,7和8共存。截至本文,[Internet Explorer各个版本总共占据了大约65%的市场份额](http://marketshare.

bug

IE bug: 消失的绝对定位元素

IE 一如既往地带来问题。真的,我觉得 IE 坚持自己的一套无所谓,不支持或者不完全支持标准也无所谓。但是,IE6 IE7 IE8 这三个版本都有各自不同的表现,实在是太让人难受了。 前两天碰到了这个奇怪的问题: 绝对定位的元素,紧邻着两个浮动元素。Firefox 中一切正常,IE6 中绝对定位元素消失了。本文来自前端观察,转载请以链接形式注明出处。 解决方法:只要别让绝对定位元素紧邻浮动元素就可以了。比如可以在绝对定位元素后面加个空元素。当然,这个空元素是毫无意义的,但是,在 IE 面前,又能怎么样呢? 经过实验,我发现,只要浮动元素的宽度不填满父元素,绝对定位元素就能正常显示,一旦浮动元素的宽度填满父元素,绝对定位元素就会消失。而且,看来,父元素宽度是这种情况发生的临界点。本文来自前端观察,转载请以链接形式注明出处。 另外,这个 demo 里面也存在 IE6 的另一个经典 bug

Firefox

Firefox 3.5 正式版发布

这篇文章写的有些晚了,事实上Firefox3.5正式版已经发布将近两天了。这距离我们之前发布《firefox3.5将带来的新特性 》已经有两个多月了,而我们也终于等来了Firefox3.5正式版的发布。 Firefox 3.5的确像上面那篇文章里提到的那样,增加了很多很有用的特性,增加了对HTML5和CSS3的支持;增强了Javascript性能——采用新的TraceMonkey引擎,原生支持JSON;支持私密浏览模式;改进Gecko引擎,从而加快页面渲染速度…等等等等。 这显然相对于Firefox3.0.x是一个质的飞跃!这也是Mozilla原先计划使用Firefox 3.1 最终改为Firefox 3.5的原因。 Firefox 3.5对Firefox是一个新的里程碑,对于浏览器领域,对前端开发,也是一个标志性的事件——这标志着,IE系列的浏览器,无论渲染速度还是对JS和CSS、HTML5的支持上,都已经被远远的甩到后面去了。 从此,我们可以完全BS微软,BS IE系浏览器了。 尽管我们尚不能完全无视IE,但是至少,我们可以旗帜鲜明的将其列为“唯一的落后的浏览器”,单独对待了…

IE

msfast——IE下的网站性能检测工具

MySpace 前不久分享了他们的一个名为MySpace’s Performance Tracker的开源项目,这是一个用来捕获和检查网页中可能出现的障碍Internet Explorer插件。 这个插件有以下几个特性: 测量你的页面的CPU占有率和内存占用; 回顾页面渲染时的屏幕截图; 回顾页面生命周期中每个关键点的HTML渲染; 查看页面在不同的连接速度中,渲染(页面显示)估计需要的时间; 根据已经经过证实的一些“最佳实践”规则(这些规则类似YSlow和PageSpeed)验证页面内容。 回顾页面加载是下载的资源(图片/js/css等),以及这些资源所花费的时间 浏览器支持:IE6+。 项目源码:http://code.google.com/p/msfast/ 注意:改工具目前尚处于pre-alpha 状态,只是刚刚可以用,还会有很大的改进,而从pre-alpha到alpha、到beta、到RC…会是一个很漫长的过程,但是神飞认为,这是目前对前端开发人员来说,是IE平台下最好的工具之一。所以,这个插件值得等待,希望MySpace的开发人员不会让我们失望。

css

10个很有用但是IE浏览器不支持的CSS属性

译自:[impressivewebs](http://www.impressivewebs.com/10-useful-css-properties-not-supported-by-internet-explorer/) 原文:[10个很有用但是IE浏览器不支持的CSS属性](http://www.qianduan.net/10-useful-css-properties-not-supported-by-ie.html) 版权所有,转载请注明出处,多谢!- - - - - - 尽管我们对CSS已经非常熟悉,应付日常的工作或在各个浏览器中搞定CSS的兼容性已经很得心应手,但是并不是所有的CSS属性都是那么的常用。在本文中,让我们看看10个可能非常有用但是在该死的IE浏览器中(主要是IE6和IE7)却不能使用的CSS属性。看完了该文,你可能会更加讨厌IE浏览器吧。 (请注意,本文发表时尚未测试这些属性在IE8中的表现。我稍后会做一个测试页面,用来测试这些属性在所以IE浏览器中的表现。) 1. Outline 在调试CSS问题的时候,我常常在指定元素上添加border来精确的查看该元素会发生什么并帮助确定问题的来源。这常常是有效的,因为它可以在布局上给我更加具体的可视性。但是如果是块级元素,这可能会发生某些错误——在任何块级元素上添加1px的边框很可能会影响到布局,它会让这个元素的宽度额外增加2px。 outline 属性是完美的替代者,因为它可以在不影响文档流的情况下呈现该对象。