IT民工的坐井观天

存档

文章标签 ‘css’

备忘 – IE6的十大Bug Fix

2009年3月10日 1 条评论

IE6的十个bug的Fix方案，看到一篇文章整理了一下，顺便转过来备忘一下。
原文链接 http://www.sitepoint.com/blogs/2009/03/06/10-fixes-for-ie6-problems/

1. 强制浏览器是用Web标准解析

HTML的写法

1 2	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或者XHTML的写法

1 2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2. Set Position: relative

给元素指定Position: relative能够解决很多奇怪的问题，比如对齐和显示不正确等。对于Position的属性要小心设置，特别是设为absolute。

3. 给Float的元素加上inline属性避免双倍margin

这大概是最著名的一个bug了，IE6下对于浮动元素，会莫名其妙的双倍空白边，解决的方法也很莫名，设上display:inline属性就好了，对于float元素这个属性本身没有任何意义。

4. 给特定元素加上hasLayout属性

很多IE6（甚至是IE7）的问题可以通过设置hasLayout这个ie only的内部属性来解决，比如让a这样的行级元素变成块级元素或者让元素应用透明效果。但这个属性并不能直接设置。最简单的让元素拥有hasLayout属性的方法是显式的为其设置高度或者宽度。有的时候，你不能显示的为其设定高度，可以使用设置高度为1%，而其父元素如果没有确定的高度时，该设置不会被应用到实际的高度上，但是hasLayout会被激活。

5. Fix字符重复bug

这是IE6上面一个非常奇怪的BUG，他的触发条件也是相当诡异，在浮动元素间如果有
<!– comment –> <!– comment –> <!– comment –>
这样的普通的HTML注释的话，会导致Float元素中的最后的字符会很诡异的出现在后面的clear元素中，具体的介绍大家可以看这里 positioniseverything 。

解决的方法也很奇怪
* 将所有的浮动元素设为 display:inline;
* 给最后的浮动元素设置 margin-right:-3px;
* 使用条件注释避免IE6下的问题 <!–[if !IE]>Put your commentary in here…<![endif]–>
* 在最后的容器内放入一个空的div (这种添加这种无语义的workaround并不是最理想的选择)

6. 需要悬浮效果的地方，尽量使用<a>标签

IE6中只能对<a>应用css hover效果，所以尽可能使用<a>标签来获取最大的兼容性。

7. 使用!important或者高级选择器来兼容IE6

使用!important和高级选择器来兼容IE6，可以避免使用那些通不过校验的非常规hack，比如所谓的_width这样的东西。我们来看个简单的例子。

#element {
	min-height: 20em;
	height: auto !important; /* understood by all browsers */
	height: 20em; /* IE6 incorrectly uses this value /*
}

IE6是不能正确解读!important这个修饰符的，所以他会错误的使用height:20em这个属性来实现最小高度。（IE6下容器会自动扩展）

#element {
	min-height: 20em;
	height: 20em;
}
 
/* ignored by IE6 */
#element[id] {
	 height: auto;
}

或者使用高级选择器，同样也能实现该目的，这样代码既能保持合法性，也能很好的去兼容IE6这个诡异的产品。

8. 避免在IE6下使用百分比尺寸

body {
	margin: 2% 0 !important;
	margin: 20px 0; /* IE6 only */
}

在IE6下是用百分比的尺寸是件非常让人头疼的事情，尽可能避免这样的使用，而是采用结合!important和精确尺寸来明确元素的大小。

9. 频繁测试，尽早测试

和其他编程一样，现在编程提倡持续测试，尽早测试，甚至可以测试驱动，在CSS开发过程中也要尽可能的频繁测试，可以参看我之前介绍的一些测试工具。 ==> 七个能够帮助你进行网页浏览器兼容性测试的工具

10. 重构你的代码

越磨砺，越光芒。。。。。

分类: 绾青丝 - WebDesign 标签: bug, css, ie6

50个超级有用的CSS开发工具

2008年12月11日 1 条评论

SmashingMagazine今天给我们带来了一篇非常全面的汇总，介绍了50个超级有用的CSS开发工具，其中相当多的小工具都是让我觉得非常有帮助的，甚至有了做几个中文版的念头，虽然C2C(Copy to China)的习惯并不是那么好，但是有的时候真的觉得在每日奔波，与CPI抗争的局势下，要有点创新的主意真的很难。

闲言少叙，让我们开始惊艳之旅，要先说明一下，”Firebug” 和 “WebDeveloper” 两位同学将缺席本次颁奖活动，因为他们实在太出名了。

CSS and Typography

Hyphenator Hyphenator.js解决了西方语言断词的问题，给行尾换行的单词加上了“-”连字符。相信很多程序员都被QA报过这样的defect，新建一条数据，有个column是afsafdsafsadfsafsafafsafasfsa，然后说页面被撑破。总是被我无情的Won’t Fix。实在不行了word-break一把。中文不会遇到这个问题。有兴趣的你去看一下。

CSS Type Set 貌似被墙了，有兴趣的翻出去看看

Typechart 快速浏览，比较各种不同的文字排版样式，（如果可以通过上传css文件来快速预览，倒也是个不错的idea）

CSS-Typoset Matrix and code generator

快速生成最常用的一些Tag的字体大小设定，由Px转换到Em尺寸上，可以比较完美的做到文字缩放。

body { font: normal 0,8764em/1.5em Arial,Verdana,sans-serif; }
html>body { font-size: 14px; }
p { margin: 1.5em 0; font-size: 1em; line-height: 1.5em; }
h1 { margin: 1.05em 0; font-size: 1.4286em; line-height: 1.05em; }
h2 { margin: 1.1667em 0; font-size: 1.2857em; line-height: 1.1667em; }
h3 { margin: 1.3125em 0; font-size: 1.1429em; line-height: 1.3125em; }
h4 { margin: 1.5em 0; font-size: 1em; line-height: 1.5em; }
h5 { margin: 1.75em 0; font-size: 0.8571em; line-height: 1.75em; }
h6 { margin: 1.75em 0; font-size: 0.8571em; line-height: 1.75em; }
类似这样

Em Calculator 楼上那个的图文加强版

真的是很好很强大，不单是觉得挺有用的，整个App的UI设计也非常让人满意，值得学习。

Facelift Image Replacement (FLIR) 快速创建图片替换的代码，FLIR技术，读作Fleer。

Vertical rhythm calculator 好多计算器，不得不说，欧美的设计师们更加注重这些细节。

typeface.js 总是感叹网页上文字能够使用的字体很有限，羡慕在PS或者Flash中可以随意挑选。typeface.js能帮你实现内嵌字体技术。

看到上面也许你会兴奋，但是对于老外的52个字母来说，这是很梦幻的效果，对于中文来说，没戏了，把几千个汉字打包到js中实在太可怕了，无论是可用性还是性能都不会让人接受。不过适当的将一些常用字做进去，可能会有不错的效果，好像是perl的build脚本，上次打包过一次，败了。

CSS Online Tools

PSD2CSS Online 在线的PSD文件到CSS的服务，没用过，也不想用，都有这个了，民工吃什么。

Conditional-CSS 根据你上传的CSS文件，检查其中一些css hack，用条件注释来保证浏览器兼容性。

说实话这是维护代码的噩梦开端。

MoreCSS CSS的js扩展，利用js来实现很多CSS中没有的特性，类似于那个著名的IE7.js，不过这种工具也算是双刃剑，怎么用看自己了。

px to em 速查表，我看到em都汗了。。

CSS Frame Generator 请看我以前的介绍文章 http://www.1×3x.net/blog/web-design/2008/04/css-frame-generator.html

CSS Redundancy Checker 检查你的CSS文件中那些是冗余的代码

CleverCSS

DSL编码风格的css扩展，又一个类似于MoreCSS的js类库，能让你用非常时髦的DSL风格去编写样式文件，我觉得更酷的是去看看这个js本身。

WordOff 被墙

Postable 帮你快速的escape一下内容

Kotatsu

Table HTML生成器，个人感觉没什么用，而且生成的TAG还是大写的，不喜欢。

阅读全文…

分类: Smashing Magazine 翻译标签: css, 网页设计

Blueprint(Css Framework) version0.8

2008年11月16日没有评论

最近每天沉醉在那堆垃圾代码中改着无穷无尽的Defect，也算是为了对岸几百万移动用户的福祉做出应有的贡献了。

非常有名的CSS Framework – Blueprint在更换了项目leader之后，最近发布了一个新的版本，Blueprint(Css Framework) version0.8。新的leader将这一版本称为新的里程碑版本。并且看的出来，作者对于1.0的正式release有着很高的期待。

简单介绍一下Blueprint这个CSS Framework，翻译自Blueprint的Quick Start Tutorial，如果需要原文在官方网站上都有。我只是节选了一些：

源文件:

blueprint/src/reset.css: 基本已经总结出最佳实践的reset.css，为页面元素重置默认值。
blueprint/src/grid.css: 之前我也介绍960gs这个Framework，grid原型设计现在是很流行的原型设计方法了，Blueprint也提供了很多方便的class来帮助你快速建立grid布局。
blueprint/src/typography.css: 关于排版的css，包含了一些非常精妙的文字排版样式。
blueprint/src/forms.css: 包含了一些表单样式。
blueprint/src/print.css: 很多时候我们没有考虑到用户的打印样式，很多无用的图片，广告都是用户所不希望打印，所以需要重新设置打印样式。
blueprint/src/ie.css: 包含了ie6和ie7的许多css hack。

再来简单看看到底该如何使用grid.css，之前写[960是个神奇的数字 - 960 Grid System介绍]，就有人问到底该如何使用960gs这样的框架，还有人说其实我也讲不出该如何使用。我看下来，可能是很多人对原型辅助css的期望过高了，他并不会帮我们做什么事情，只是帮助我们更好的去做一些事情，来看下例子：

<div class="container showgrid">
    <div class="span-24">
        头部页眉
    </div>
    <div class="span-4">
        左边侧栏
    </div>

    <div class="span-16">
        <div class="span-8">
            居中行1-1
        </div>
        <div class="span-4">
            居中行1-2
        </div>
        <div class="span-4 last">
            居中行1-3
        </div>
        <div class="span-16 last">
            正文内容
        </div>
    </div>

    <div class="span-4 last">
        右边侧栏
    </div>
    <div class="span-24">
        页脚
    </div>
</div>

效果图：

通过这些预置的class，能够很快的排版，我想通过这个例子大家应该能理解类似于blueprint 960gs这样的framework该如何使用。

如果感兴趣的话，去下载使用吧 http://blueprintcss.org/

分类: 光明神 - 译林, 绾青丝 - WebDesign 标签: blueprint, css, css_framework, webdesign

Absolute, Relative, Fixed 告诉我你们哪里不一样

2008年10月21日没有评论

楔子：今天是去金茂上班的第一天，还从来没在42楼这样的高度工作过，还真有点不一样，坐电梯是还有些耳疼的感觉。虽然是办公室变了，但是不变的是需求永远在变。新改动，要给一些元素加mask，好吧，absolute，然后加个颜色盖住。

问题也引出了，Absolute, Relative, Fixed，这些position设置到底有那些不同，分别适合在什么样的场景之下。很多时候还是让人觉得很困惑的。看下定义，你会发现腾格尔是用最大的力气把歌唱轻，他们是用最简单的词把话说的无比晦涩。

设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。

还是换个方式解读一下这几个选项吧。

Static 元素默认值，所有元素在没有显式设定Position的时候，都是Static，不过该属性值并没有什么特殊的意义，只是一个初始值。也就是说它并不代表元素具有那些特别的布局定位信息，当你显式去设定为Static时，唯一的作用就是覆盖之前你为Position设定的其他非默认值。
Relative 相对于Absolute，Relative更让人困惑，经常有人会误用该定位属性。一句话概括就是，“相对于元素自身”，关键词在于自身二字，如果你只将一个元素设置为 {position : relative; } 的话，而不去设置其他offset值，比如top left等，该元素其实等价于{position : tatic;}，元素的位置和表现不会有任何改变。如果你设置了其他定位属性，比如 top:10px; 那该元素将相对自身原来的位置向下移动十个像素，这在用来对齐元素时很有效。

1点需要提及的，z-index，一个relative元素（允许我使用这样不是很严谨的说法）默认z-index高于其他所有static元素，即使你显式的为某个static元素设置高于relative元素的z-index为99999。

Absolute 这是个强力选项，有点瑞士军刀的感觉，你可以将一个元素定位在页面上任何你希望他出现的地方。对于一个absolute元素，必须指定 left ， right ， top ， bottom 属性中的至少一个，而作为参照的顶点是什么呢？默认情况下是HTML元素，也就是页面的左上角，如果该元素具有一个relative的父节点，那顶点则变为该relative父节点。如果合并一下这句比较晦涩的话就是，包含在relative元素里的偏移值由relative元素左上角开始计算，否则都将以页面左上角计算。

关于absolute元素最重要的一点，就是设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。这点和float元素有些类似。

//==============================================

节译自：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

有些重新演绎之过，但也是为了能够更加适应中文的表达方式。

分类: 光明神 - 译林标签: absolute, css, position, relative, 网页设计

测试驱动之于网页设计开发

2008年10月1日 3 条评论

这是一篇译文，其中涉及了不少比较专业的概念，我将用一系列文章来介绍这些概念，这些文章对于网页设计进行了更加深入的探讨，也许在我们看来有些学究气了，但是通过这种探讨，我们从中应该看到一些好的方法论和更多的用户体验关怀。

Progressive Enhancement（逐步增强）开发模式正逐步成为基于标准设计的最佳实践。从简洁，语义化的HTML标记开始，通过Javascript和CSS层层渐进式增强，我们试图为任何受众创建可用的体验，对于那些功能不那么强大的设备和浏览器能获得一个相对简单但是功能完整的用户体验，而其他那些功能齐备的则将获得剩下的附加特性和体验。

这是就是PE（Progressive Enhancement 以下缩写为PE）的基本理论。但是在实践过程中，这些增强仍然被推送给了绝大多数设备，其中包括大量不支持这些特性的对象，比如较低版本的浏览器或者是功能受限的移动客户端。这些设备一开始的确获得简单但功能完整的页面，但随后被“增强”到了乱糟糟的页面。这显然是和PE理论背道而驰的。

那我们应该怎么做增强以确保所有的设备和浏览器获得正确的效果呢？测试，这时候我们需要的是通过逐级测试来确保这点。

兼容性测试

不久之前，我们发现可以使用很简单的Javascript代码来测试目标设备对于CSS的支持情况。让我们从一个很简单的盒模型测试开始，我们插入一个对象到当前Document中，然后设置一些样式属性，然后通过Javascript来校验是否被正确支持了。

function boxmodel(){
  var newDiv = document.createElement('div');
  document.body.appendChild(newDiv);
  newDiv.style.width = '20px';
  newDiv.style.padding = '10px';
  var divWidth = newDiv.offsetWidth;
  document.body.removeChild(newDiv);
  return divWidth == 40;
}

通过上面的TestCase，我们能很快的检查目标设备是否正确支持盒模型，然后我们也能采取对应的增强方式。

有了上面的这个主意，我们能类似的写出如下测试用例：

float
clear
position
overflow
line-height

当然仅通过CSS测试并不能覆盖到所有情况，幸运的是，我们还能通过Javascript测试来做其他兼容性测试。（译注，这可能是大家比较熟悉的浏览器检测了）。

document.createElement()
document.getElementById()
xmlHttpRequest()
window.onresize()
window.print()

通过上述测试，我们可以知道是否可以正确显示客户的应用。

我和我在Filament Group的同事开发了testUserDevice.js，来完整上述所有的测试。

利用这些测试结果

整合testUserDevice.js到一个页面上是相当简单的，讲JS文件包含进来，然后调用testUserDevice.init()方法就可以了。

为了更好的阐述这些概念，我们来看一个具体的例子，这是一个有一定复杂度的表单页面，让我们从最基本的HTML开始。

DEMO1

=== CSS增强

当目标设备通过了我们的测试代码，会对页面进行一系列的增强，默认情况下，会进行下列DOM更新：

样式Class enhanced 被加到[BODY]元素上。
(title="enhanced") 可选的样式表文件被启用。
(title="not_enhanced") 与之相反的，所有这些非增强样式表文件被禁用。

这样的变化给你提供好几个契机去做层进式的增强，比如BODY标记上的样式增强。来看下例子：

body div.example { 
   margin: 1em 0;
}

如果用户的浏览器通过了测试，我们可以使用float布局来实现水平排列。

body.enhanced div.example { 
  float: left; 
  width: 30%; 
  margin: 0;
}

来看一下示意图，

这只是一个很小的变化，当你要做一些比较复杂的增强的时候，使用选择器来实现就显得不怎么合适了，所以这个时候，你应该使用可选的样式表文件来替换原来的效果。

这虽然只是简单的样式表文件替换法，但重要的地方在于我们的增强只在能够正确解释的地方被应用了。让我们再来看一下前面的Demo页面，看看现在的增强后的效果。

Demo 2

尽管我们做的只是很简单的CSS增强，但是测试目标设备是否能够正确支持依然是十分有必要性的。（译注：术抑或是道，以何治天下）

Javascript增强

很多页面增强使用了Javascript。testUserDevice.js 允许你具体指定一些script来做增强。非常简单，你只需要将你的增强方法作为参数传给我们的方法就可以了。

testUserDevice.init( function(){
/* »fancy stuff goes here */
} );

就像你看到的这样，我们将一个匿名方法传给了init方法。如果测试通过，这个方法就会被调用执行。记住一点，这些动作有可能在DOM树构建完毕前触发，所以DOM相关的方法仍然应该放在DOM树构建完毕之后，比如jQuery的ready事件或者是body.onload事件之后。

来看一下我们的最终Demo页面，有了如下增强

生日输入框有了日历供选择日期。

有了滑块选项。

宠物那栏也是根据用户输入，动态展示一下输入框。

有了自动完成功能。

使用了Ajax提交方式。

Demo 3

一次测试，终身受用

在完成测试之后，testUserDevice.js 会留下一个cookie记录这次的测试结果，这样也能带来性能上的好处。我们通过PHP代码也能非常方便的去处理这些增强动作：

<?php
//check for cookie (enhanced=pass), and set the »
//stylesheet rel depending on its value
$cssRel = ($_COOKIE['enhanced'] == "pass") ? »
"stylesheet" : "alternate stylesheet";

echo '<link rel="' . $cssRel . '" »
type="text/css" href="css/enhanced.css" mce_href="css/enhanced.css" »
title="enhanced" />';
?>

同样的，testUserDevice.js 支持你加入更多的自定义测试。下面就为大家介绍下，如何编写自定义的测试用例，并且加入到testUserDevice.js 中去。
（译注：此处并未全文译出，我想程序员间的交流代码足够了，代码是无国界的，说多了也没什么用处。）
1

testUserDevice.init([ 
       { testName: 'ajaxCapable',
        pass: ['ajax'],
        scripting: function(){ useAjax(); }   

       }
]);

testUserDevice.add( 'confirm', function(){ 
   if(window.confirm){return true;} 
   else {return false;}   

});

testUserDevice.add( 'confirm', function(){ 
     return (window.confirm) ? true : false;});

原文地址：http://alistapart.com/articles/testdriven
Reprinted with the permission of A List Apart and the author[s]

//====================================================
译者：
这里说的测试驱动，并不是我们平日里程序开发中的测试驱动。当然两者的理念其实某种角度上来说是一样的，只做确信正确的改动。我平日里工作中，说实话没有过这样的思考。如何适应各种不同的目标客户端，我想到的第一个是尽可能的去兼容，但是PE这种理念从另一个角度提出解决方案。给不同的人不同的，但必须是完整且正确的体验。这点值得我们进行更深一步的讨论。