WL

越来越好，越好越来

Category: WEB规范

  • Safari/Chorme/Webkit-based Browsers CSS hack redux

    Safari CSS Hack写法。 @media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari 3.0 and Chrome rules here */ }

  • Having “layout”

    Having “layout” We all know that browsers can be buggy, and IE on Windows seems buggier than most. One of the reasons IE/Win behaves differently from other browsers is because the rendering engine uses an internal concept called “layout.” Because layout is a concept particular to the internal working of the rendering engine, it is…

  • 拥有布局 IE haslayout

    找们那知道浏览器有bug，而且Windows上的lE的bug 似乎比太多数浏览器都多。IE/Win的衣现与其他浏览器不同的原因之一是，显示引擎使用一个称为布局(layout)的内部概念。因为布均是一个专门针对显示引擎内部工作方式的概念，所以一般悄况下不需要了解它。但是，布局问题是许多IE/Win显示bug的根源，所以理解这个概念以及它如何影响CSS是有捂助的。 什么是布局 Windows 上的IE 使用布局概念来控制元素的尺寸和定位。那些称为拥有布局(have layout)的元素负责本身及其子元素的尺寸和定位。如果一个元旦在没有拥有布局，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。 IE 显示引擎利用布局概念减少它的处理开销。在理想悄况下，所有元素都控制自己的尺寸和定位。但是，这会在IE中导致很大的性能问题。因此，IE/Win 开发团队决定只将布局应用于实际需要它的那些元素，这样就可以充分地减少性能开销。 在默认情况下拥有布局的元素包括: body 标准模式中的 html table tr, td img hr input, select, textarea, button iframe, embed, object, applet marquee 布局概念是Windows 上的I E 特有的，而且它不是CS S 属性.尽管某些CSS 属性会使元ffi拥有布局，但是在CSS 巾无法显式地设宣布局.可以使用JavaScript 函数hasLayout 查看一个元亲是否拥有布局.如果元素拥有布局，这个函数就返回true ; 否则返回falseo hasLayout 是一个只读属性，所以无法使用JavaScript 选行设置. 设宜以下CSS 属性会自动地使元亲拥有布局· position: absolute float: left or right display: inline-block width: any…

  • XHTML CSS 学习总结

    IE的haslayout是个很纠结的东西，掌握好CSS就得掌握好它。初学CSS时走了很多弯路，以下几篇文章在我的学习中起了很大的作用，希望能让大家受益。 之前有翻译一篇on having layout的文章，我的翻译文章在这里：IE Haslayout 详解， 本文Having layout 的摘自 CSS Mastery Part 9， 实例部分是对之前翻译文章很好的补充，部分IE BUG很少用到，就略去了。直接阅读本文的中文版：IE拥有布局 追寻本源，上策攻心——学习技术以学习它的思想、方法为上策，掌握方法再学习技术会茅塞顿开。以下是关于CSS调试思路的文章，各人的角度不太一样，但大体上的思想是差不多的，互为补充。 我的文章：XHTML CSS调试的一些思路 我的文章：整理后的CSS Mastery 的章节 BUGS AND BUG FIXING (En), 臭虫以及臭虫解决方案（中文版） 淘宝UED 怿飞写的如何快速定位页面中复杂 CSS BUG 问题

  • XHTML CSS Tools collection

    organize tools of xhtml and css from the web, in order to use it as i like. css filters (css hacks)，css filters for different browsers tests: text-decoration css filters (css hacks)，css filters for different browsers HTML demo:css filters (css hacks) original article:css filters (css hacks) download source:[download#9] tests: text-decoration HTML demo:tests: text-decoration original article:RichInStyle.com tests:…

  • CSS XHTML 相关资源整合

    本文为慢慢整合，日积月累就多了。 css 过滤器，CSS 浏览器兼容表 text-decoration属性详解 css 过滤器，CSS 浏览器兼容表 HTML：css filters (css hacks) 原文：css filters (css hacks) 下载： text-decoration属性详解 HTML: tests: text-decoration 原文：RichInStyle.com tests: text-decoration

  • flash 在浏览器中大小

    <object width=”300″ height=”100″> <embed width=”300″ height=”100″ /> </object> ie(lte IE 8)渲染出的大小由object标签中的width以及height确定。 其他浏览器，如firefox, opera, chorme, safari渲染大小由embed确定。 Technorati : flash size in browsers Del.icio.us : flash size in browsers Zooomr : flash size in browsers Flickr : flash size in browsers

  • IE Haslayout 详解

    IE的haslayout是个很纠结的东西，掌握好CSS就得掌握好它。初学CSS时走了很多弯路，以下几篇文章在我的学习中起了很大的作用，希望能让大家受益。 此文是和老包共同弄的，参考了On have layout 。 另外两篇文章摘自CSS Mastery【精通CSS】，与此文相互补充，希望对大家有帮助 Having “layout” 拥有布局 IE haslayout 拥有layout概述 Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其”layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为”尺寸臭虫(dimensional bugs)”[32]，意思是这些臭虫可以通过赋予相应元素某个宽度或高度解决。 “Layout”是一个 Internet Explorer for Windows的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。 微软的开发者们认为元素都应该可以拥有一个”属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 hasLayout，这种渲染特性生效时也就是将 hasLayout 设成了 true 之时。了解hasLayout将对IE的臭虫会有更多深入的体会甚至解决方案。

  • CSS 框架结构

    分工的出现，导致生产力的进一步发展。做设计、CSS能够合理化的分工同样是IT生产力的发展。 我们开发一个项目，会有许多CSS文件，这些CSS文件共同组成了项目的样式表，页面中的样式也同时也会是多个人共同编写的。就像人们穿衣服一样，衣服、裤子、鞋都是不同厂家生产的，怎么分工，怎么协调，成了最重要的工作。 在做了许多设计，HTML CSS 以后，如何把以前的东西、团队的东西很好的复用，减少再次劳动也是提高团队工作效率的一大法宝。 看了A List A Part 的两篇文章Understanding Progressive Enhancement和Progressive Enhancement with CSS再根据自己在项目开发中的一些经验总结出一些东西，现分享出来。 我的CSS文件结构图如下： 注释代码格式： ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Use: Core Styles , Set the core styles Author: adamghost Date: 30 October 2008 Created by: adamghost E-mail:adamghost1@gmail.com wwl3.com Project: XXX Page(s): all ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 各文件作用 screen.css 导入其他的样式 page-xx.css 单独页面所需要的样式写这里，在需要的页面中引入 ie(x).css 针对IE不同版本设置hack用的css。需在页面中写ie条件注释 reset.css 重置页面样式 core.css 页面核心效果样式（font, color, line-height,…

  • XHTML CSS调试的一些思路

    授之以鱼不如授之以渔，在这里就不论述一些CSS Hack和编写的具体错误，我把解决CSS问题的一些思路分享给大家，把自己几年来学习CSS的一些经验分享出来。 调试工具 Firefox Firebug Web Developer Dom Inspector Download Here: Firefox Add-ons IE IE Develop Bar DebugBar IETester 不同IE版本调式 调试思路 主要从客观和主观两方面解决调试问题。 客观 在CSS调试过程中，经验会因为一些客观的因素导致莫名奇妙的问题，就好比做实验时的外界因素的影响。有过一段经历，调试一个页面时一直都不正确，花了很长时间用单元测试的方法终于发现了问题，原来是把label写成了lable（这不尽让我想起了《德国专家的故事》读者上看的，貌似是这名）。所以我们在做研究的时候将客观的外界因素全部去掉，开发起来才能得心应手。针对CSS的编写主要从以下几个方面入手： 样式是否被调用使用IE Develop Bar, Web Developer中的Disable Cache；找到相应元素，查看是否调用样式 清除浏览器默认样式编写CSS之前先清除掉浏览器默认样式，可以让我们在调试过程中忽略不同浏览器的渲染不同。这里Yahoo YUI的yui.css和A list A part的reset.css都挺好用。在实际运用中，我认为用*{padding:0px;margin:0px} a img{border:none}就足以应付了，至于list-style可以在单独设置，没必要一开始都去掉。 DOCTYPE确认页面是否声明DOCTYPE，DOCTYPE的不同会影响浏览器的渲染方式。 CSS语法检查检查样式名有无拼写错误、是否忘记结尾 } 等。标点符号,;。可以用CleanCSS检查 CSS的拼写错误。 XHTML标签检查使用Dreamweaver中用Ctrl+[选择父级标签，Ctrl+Shift合并标签，逐级检查是否封闭，用Dreamweaver的Validate就可以啦。 优先级id, class, style优先级大家都不会出错，当多个CLASS重叠时样式表中的排序会产生很大的影响。（如class="a b c"时a b c在样式表中的排序就会有影响）。 检查字符留意空格或者编码的问题，firebug 很容易就查出他们的问题，查一下头部是否有多余字符或者文档中是否有text节点。 主观 主管因素主要是技术上的问题，编写XHTML CSS经验多了之后，不知不觉就很少会出现预料之外的事了。到后期能够基本上不使用HACK以保证每个浏览器都兼容，如双margin问题，思路较清晰在一开始就用padding完全防止他的发生。…

  • IE调试环境中选择IE8+iedevelopbar的原因

    Iedevelopbar 在IE8中的功能相对于在IE7中，做了很多方便开发者的设计。以下主要是我使用过程中的一些体会，旧有的和一些基本的功能就略过了。

  • (X)HTML Strict 下的嵌套规则

    记得两年前写页面的时候，LI、DIV等标签疯狂用，不停的嵌套。做完一些项目回头分析，逐渐发现一些嵌套上的问题。嵌套的错误可能会导致一些意想不到的页面显示问题。正关心着这事呢，JunChen Wu翻译的Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict)真是及时雨，将这表打印了放在显示器旁，日久生情就把它牢记，再后来页面也基本上没出现过嵌套的问题和疑惑。 两年后的今天，和小昭同学讨论起这个问题，赶紧拿出来温习下。