DOM-CSS - 随笔分类 - barbabravo

IE9透明filter和opacity同时生效的解决办法 IE9 hack only

摘要：转载请注明：来自于http://www.cnblogs.com/bluers/问题：假设结构如下：若背景需要透明，通常会这么写： .wrapper{ position:relative; width:100px; height:100px;} .cov... 阅读全文

posted @ 2014-11-14 16:46 barbabravo 阅读(1513) 评论(0) 推荐(0)

史上最全的CSS hack方式一览

摘要：做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器... 阅读全文

posted @ 2014-08-05 20:32 barbabravo 阅读(172) 评论(0) 推荐(0)

CSS3重要内容翻译

摘要：以上是废话1.3 此处未完全确认，相较于css3和css3的选择器，区别包括：基础定义改变（选择器、选择器组，简单选择器等），特别的，作为css2中简单选择器，如今被成为简单选择器序列，“简单选择器”作为这个序列的组成部分。允许在元素类型选择器上、通用选择器和类型选择器上增加可选的命名空间。一个新... 阅读全文

posted @ 2014-05-03 23:11 barbabravo 阅读(520) 评论(0) 推荐(0)

css命名为何不推荐使用下划线_

摘要：一直习惯了在命名CSS样式名时使用下划线“_”做为单词的分隔符，这也是在写JS时惯用的写法。用过CSS hack的朋友应该知道，用下划线命名也是一种hack，如使用“_style”这样的命名，可以让IE外的大部分浏览器忽略这个样式的定义，所以使用“_”做为命名时的分隔符是不规范的。在做CSS检查时会出现错误提示，因此要避免使用下划线命名。为此得找一个能代替下划线而又合规范的符号，当然不是一定要用这种分隔符之类的，只是个人习惯问题。做了个小测试，将下划线分别用了“~”、“$”、“`”、“&”和“－”去代替，结果只有“－”号是可以使用的，而且对JS的支持也正常，看下测试：以下为引用的内容：阅读全文

posted @ 2014-03-09 08:14 barbabravo 阅读(2143) 评论(0) 推荐(0)

中文字体其实也可以用在网页上的

摘要：本文转载自http://hxgdzyuyi.github.io/blog/chinese-subset.html中文字体和 @font-face对于互联网而言，自定义字体从来不是一个陌生的东西，IE 4 从 1997 年起就已经支持在浏览器中嵌入自定义的字体。而这一种技术被 Goolge Fonts 等免费字体服务推到了一个新的高度。前端工程师借助于 @font-face ，可以轻松的在网页上使用各种字体，基本已经成为国外网页设计的标配了。可是回过头来一看，中文和 font-face 似乎从来没有什么交集， “在网页中使用个性化的中文字体？” 这看起来是一件很困难的事情，并且很少人做过的阅读全文

posted @ 2014-01-24 14:03 barbabravo 阅读(1019) 评论(0) 推荐(0)

css expression explaination

摘要：http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx 据说已经被弃用的IE css写法，为了修复一些IE8及老版本的BUG，还需要再了解一下。阅读全文

posted @ 2014-01-13 10:06 barbabravo 阅读(133) 评论(0) 推荐(0)

css margin collapse

摘要：css中存在margin collapse，即边界塌陷或边界重叠。http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html 阅读全文

posted @ 2014-01-03 10:43 barbabravo 阅读(123) 评论(0) 推荐(0)

cursor变换

摘要：cursor:hand 与 cursor:pointer 的效果是一样，都像手形光标。但用FireFox浏览时才注意到使用cursor:hand在FireFox、chorme里并被支持。 cursor:hand ：IE完全支持。但是在firefox是不支持的，没有效果。 cursor:pointer ：是CSS2.0的标准。所以firefox是支持的，但是IE5.0既之前版本不支持。IE6开始支持。附：cursor属性收集光标类型 CSS 十字准心 cursor: crosshair; 手 cursor: pointer; cursor: hand; 写两个是为了照... 阅读全文

posted @ 2013-12-29 09:44 barbabravo 阅读(168) 评论(0) 推荐(0)

RB1001: IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常

摘要：标准参考根据W3C CSS2.1规范第8.3节中的描述，边距属性设置了一个框的边距区的宽度。'margin' 缩写属性设置所有四边的边距，而其它的边距属性（ 'margin-top' ，'margin-right' ， 'margin-bottom' 及 'margin-left' ）只设置它们代表的那一边的边距。边距属性的取值可以是下面值之一：指定一个固定的宽度。百分比的计算基于生成的框的包含块的宽度。auto 其表现细节请参见宽度和边距的计算一章。边距属性允许有负值，不过可能有与实现相关的限制。问题描述I 阅读全文

posted @ 2013-12-03 17:31 barbabravo 阅读(266) 评论(0) 推荐(0)

KB006: CSS 框模型( Box module )

摘要：框和布局在 KB005: CSS 层叠中已经介绍了 CSS 的重要之处。CSS 可以说是页面表现的基础， CSS 可以控制布局，控制元素的渲染。布局是讲在电影画面构图中，对环境的布置、人物地位的调度、人物之间的关系、人物和景物的关系等的安排。大同小异，CSS 的布局也是一样。CSS 的布局，包含两个大部分：元素：元素及其组成，类似电影布局中人物的高矮胖瘦、衣着配饰等，以及场景中的桌椅板凳，物品等等。定位：元素的位置，类似电影场景的中对环境的设置，人物作为元素，他们之间的关系会影响其在场景中的位置。总的说来，CSS 的布局比电影场景布局简单的多，因为 CSS 中要控制的元素都是死的，而人是活阅读全文

posted @ 2013-12-03 16:10 barbabravo 阅读(294) 评论(0) 推荐(0)

外边距叠加collapsing-margin

摘要：原载：Smallni | http://www.smallni.com/collapsing-margin/恩，margin叠加一直是个问题，也是我们一直会遇到的问题，很久以前就想把这个知识点整理下，做一个详细的讲解和分析。前一段时间知乎上有人问了这个问题，刚好克军也做了个回答，但回答的不尽其然，并且我做了自己的分析。刚好今天写到自己的博客里，并做一个更详细的探讨。今天主要介绍的就是：到底神马是外边距叠加？神马情况下外边距会叠加？如何避免外边距叠加？外边距叠加的定义请先阅读w3c关于collapsing-margin的官方介绍：In CSS, the adjoining margins of 阅读全文

posted @ 2013-12-02 17:40 barbabravo 阅读(207) 评论(0) 推荐(0)

css绘制多种形状

摘要：利用border来绘制多种形状阅读全文

posted @ 2013-11-30 12:58 barbabravo 阅读(124) 评论(0) 推荐(0)

IE layout详解

摘要：引言:Internet Explorer 中有很多奇怪的渲染问题可以给他一个”layout”得到解决，John Gallant 和 Holly Bergevin把他归类为“dimensional bugs”（尺寸bug或者尺寸臭虫），意思是可以给对应的元素赋予宽度和高度解决；这给我们带来了一个问题：为什么layout可以改变渲染模式和元素之间的关系？hasLayout定义：layout是IE/WIN里面的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何和其他元素进行相互作用和联系、如何响应和传递应用程序事件、用户事件等；layout的特性可以被某些css样式属性不可扭转的触发，一阅读全文

posted @ 2013-11-29 22:02 barbabravo 阅读(323) 评论(0) 推荐(0)

input border IE6 bug

摘要：border:none;与border:0;的区别体现有两点：一是理论上的性能差异二是浏览器兼容性的差异。1.性能差异【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。2.兼容性差异兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。【border:n 阅读全文

posted @ 2013-11-29 10:32 barbabravo 阅读(314) 评论(0) 推荐(0)

margin-top在IE与其他浏览器下的不同

摘要：两个box，box1嵌套box2，box2使用margin-top在IE下与其他浏览器不同。待整理阅读全文

posted @ 2013-11-29 10:30 barbabravo 阅读(534) 评论(0) 推荐(0)

css3之box-sizing

摘要：css盒子模型中包括几种重要的属性，包括margin、border、padding以及content。但浏览器对其盒子模型的解释则有所不痛，启用标准模式还是IE（怪）模式是与当前页面的文档声明相关的。借用网上一幅图：这是标准盒子模型，可以看出，其宽和高均为其中content的宽高。对于IE来说，，其css盒子的宽高则包括了border，padding以及content。如何判断当前的页面使用了哪种解释模型呢，这就与文档声明有关。在文档顶部增加了doctype声明则会被解释为标准模型，若不加则与具体的浏览器相关了，ie以ie盒子的方式解释，ff仍然以标准盒子方式解释。css2.1规范即为标准模型阅读全文

posted @ 2013-11-07 22:46 barbabravo 阅读(286) 评论(0) 推荐(0)

详解CSS选择器、优先级与匹配原理

摘要：原文链接：http://polaris1119.javaeye.com/blog/764428作为一个Web开发者，掌握必要的前台技术也是很重要的，特别是在遇到一些实际问题的时候。这里给大家列举一个例子：给一个p标签增加一个类（class），可是执行后该class中的有些属性并没有起作用。通过Firebug查看，发现没有起作用的属性被覆盖了。这个时候突然意识到了CSS选择器的优先级问题，这里就CSS选择器的优先级问题做了一些总结。51CTO推荐阅读：巧妙地使用CSS选择器选择器种类严格来讲，选择器的种类可以分为三种：标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前阅读全文

posted @ 2013-09-21 23:16 barbabravo 阅读(408) 评论(0) 推荐(0)

老外的前端面试题

摘要：用Twitter吗？如果用，你在Twitter上面关注谁了？用Github吗？如果用，请列举几个你在上面关注的存储库(repos)。你关注了什么博客？你用过什么版本控制系统？你偏爱的开发环境是什么？（操作系统，编辑器，浏览器，工具等等）你能描述一下当你创建一张网页时的流程吗？你能描述一下渐进增强和平稳降级的不同之处吗？如果回答了“没人能描述”，则加分如果描述了“特征检测”，则额外加分解释“语义化的HTML”的意思。JS压缩（Minification）是作什么用的？为什么把站点资源文件放在多个域下的做法比较好？一个浏览器一次从一个域下下载几个资源？如果你为某个设计稿做了8个不同的css文件，你是阅读全文

posted @ 2013-09-21 20:48 barbabravo 阅读(499) 评论(0) 推荐(0)

纯css实现slide效果

摘要：尝试一下，仅作记录。阅读全文

posted @ 2013-09-21 17:27 barbabravo 阅读(3282) 评论(0) 推荐(0)

使用 ADD-ON SDK 开发基于 Html JQuery 和 CSS 的 firefox 插件入门教程1: 创建一个简单的 Add-on

摘要：【本文转载自http://sixpoint.me/942/implementing-simple-addon/】实现一个简单的插件教程的这个部分带你使用 SDK 来实现, 运行并打包一个插件. 这个插件在 Firefox 的右键菜单中添加一个菜单项, 用来将选中的文字翻译成英语.插件的初始化创建一个叫做 translator 的文件夹, 用来放置插件所需的所有文件.你并不需要在 SDk 的根目录下创建这个文件夹. 一旦你在 SDK 的根目录执行了 bin\activate (win) 或者 source bin/activate (*nux), cfx 就会记住 SDK 的位置, 从而让你可以阅读全文

posted @ 2013-09-18 16:57 barbabravo 阅读(745) 评论(0) 推荐(0)

Barbabravo

随笔分类 - DOM-CSS

公告