背景图1像素偏差

日期：2010-07-14 分类：像素差异, 前端制作

DEMO-1：给页面设置960px的纯黑色背景图横向居中，同时内部960px宽的容器设置纯色背景，得出各浏览器下效果如图，从上到下依次为了firefox、chrome、IE 8、IE 8自带IE 7标准模式、IE6

背景图1像素差异示例

仔细看IE6的左下角可以看到，背景图向右偏了1像素。解决办法么，CSS还没强大到有background-position:center-1px的写法，只好给内容器设置{_position:relative;_left:1px;}向右移一像素。

再进一步，DEMO-2，尝试给两个div设置高度，让浏览器出现滚动条，那么会发现chrome下也会像IE 6一样出现偏移，这时候就需要给chrome写hack。写法可以参考aliued的文章说说CSS Hack 和向后兼容

0 Comments

WIN 7下Internet Explorer Collection替换方案

日期：2010-03-29 分类：前端制作

搜索来源里经常看到有人搜索Internet Explorer Collection和WIN 7的组合关键词，猜测是有些问题。

Internet Explorer Collection目前版本1.6.0.6，官网称解决了一些WIN7的问题，另外在WIN 7的环境下，IE 7默认不可安装，推荐使用IE 8自带开发者工具的IE 7模式切换。个人装上测试发现，IE 6连地址栏都没有，相当不爽，而且JS一堆报错。

那么就像当初从IETester转向IE Collection一样，换个方法——使用虚拟机搭建真实XP环境，IE下各种调试工具都能使用，会比各种残缺IE方便许多。

我现在使用的是Win7+VMware安装XP+IE 6，国内环境应该大多是各种神奇的旗舰版WIN 7，那么另外的方法是，使用WIN 7的XP Mode。09年WIN 7下的Virtual PC需要CPU虚拟化支持，但是10年3月17日出了个补丁KB977206，可以免除硬件限制直接安装。XP Mode比VMware方案好的一点在于文件共享设置很方便，个人测试文件访问效率也高许多。

XP Mode的下载页面中第三步就是补丁下载。需要注意的是，这个补丁会验证系统正版与否，并且此验证比Media player初次设置时的验证强力许多，经测试传说中的OEM版会被黑屏，想这么玩的就各显神通了……

2 Comments

IE 9的User Agent

日期：2010-03-24 分类：前端制作

IE官方博客发布文章，公布了IE 9使用的新user agent，与IE 8相比改动：

Mozilla/4.0改为5.0
MSIE8.0改为9.0
Trident/4.0改为5.0

如果没有其他软件增加的内容（比如国内诸多maxthon等使用IE内核的浏览器），那么默认则是Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)。

与IE8相同，IE9也保留兼容模式，使用IE7 Standards Mode，UA为Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0)。使用Trident/5.0来区分IE8-Trident/4.0-的兼容模式。

恩，估计到时候Maxthon又会在控制面板里默认设置为兼容模式了。上次IE8下装Maxthoh，看系统默认UA为兼容性试图，而且还红字标注更改有风险。这让俺们按照标准模式写生怕自己网站进入微软兼容性网站列表的前端们十分郁闷。

奇怪的是，IE 9应该只在WIN 7平台上使用，兼容模式的Windows NT竟然也保留了Vista的6.0而不是WIN 7的6.1。另外，IE 8的UA有判断系统是32位还是64位的字符，IE9里没见有相关说明

0 Comments

heading content笔记

日期：2010-03-21 分类：前端制作

一个页面里应该有几个h1？这个问题从W3C的HTML4.01文档开始就争论到现在。之前就有这个疑问，当时选取了一篇文章只能有一个标题的常规逻辑作为参考。今天又系统看下HTML 5草案里的heading content说明及HTML 4.01的文档，加深理解。

首先，HTML 5规定了heading content和sectioning content两种概念：
heading content包含h1、h2、h3、h4、h5、h6及hgroup；
sectioning content则包含article、aside、nav、section，以及sectioning roots元素blockquote、fieldset、body、td、details、figure

HTML 5草案中部分文档的蹩脚翻译：

sectioning content元素中的第一个heading content元素代表了这个章节的标题。之后的同级或者更高级的标题（暗示）开始新的章节，而低级的标题暗示开始当前章节的子章节；
sectioning content元素总是代笔着在它所属的祖先元素下建立新的子章节，无论此章节所使用的标题等级；
建议明确指定sectioning content的外框元素，来替代在同一个sectioning content元素中使用各级标题来暗示上下文层级关系。
sections可以包含任何等级的标题，但是强烈建议全部使用h1，或者使用适用于当前所在章节等级的标题。

思考：这个强烈建议（authors are strongly encouraged）的目的是什么？

强化sectioning content的DOM层级暗示作用，简化heading content带来的歧义；
避免在低级section中使用高级heading带来的误导
实际应用中h1的尴尬——比如常见的站点logo使用h1标识站点标题，但是在文章内容页需要强调的是文章的标题

W3C给的代码示例：
这种代码在语法上没有任何问题

<body>
<h4>Apples</h4>
<p>Apples are fruit.</p>
<section> 
    <h2>Taste</h2>
    <p>They taste lovely.</p>
        <h6>Sweet</h6>
        <p>Red apples are sweeter than green ones.</p>
    <h1>Color</h1>
    <p>Apples come in various colors.</p>
</section>
</body>

但是使用如下结构更容易让人理解

<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
    <h2>Taste</h2>
    <p>They taste lovely.</p>
    <section>
        <h3>Sweet</h3>
        <p>Red apples are sweeter than green ones.</p>
    </section>
</section>
<section> 
    <h2>Color</h2>
    <p>Apples come in various colors.</p>
</section>
</body>

在HTML 5草案中h1-h6部分中介绍，这些元素具有与数字相同的等级，h1为最高，h6为最低。两个相同的元素则具有相同的等级。语法上来讲，h系列标签的等级评判建立在DOM树的层级.同样有两种不同的示例，指出其等级相同：

<body> 
    <h1>Let’s call it a draw(ing surface)</h1>
    <h2>Diving in</h2>
    <h2>Simple shapes</h2>
    <h2>Canvas coordinates</h2>
    <h3>Canvas coordinates diagram</h3>
    <h2>Paths</h2>
</body>

<body> 
    <h1>Let’s call it a draw(ing surface)</h1>
    <section>
        <h1>Diving in</h1>
    </section>
    <section>
        <h1>Simple shapes</h1>
    </section>
    <section>
        <h1>Canvas coordinates</h1>
        <section>
            <h1>Canvas coordinates diagram</h1>
        </section>
    </section>
    <section>
        <h1>Paths</h1>
    </section>
</body>

而在HTML 4.01的文档中，仅仅指出“一些人认为越级使用标题标签不合理，h1,h2,h1可以，h1,h3,h1不可以”，侧面也避过了h1唯一性的话题。

这个问题国外也有很多讨论，http://annevankesteren.nl/2004/05/h1，里面评论中有一句话说的不错：HTML is nice to use for documents, but not so nice for building user interfaces

目前更多的考量是从SEO角度出发，因为没有资料说明搜索引擎也会按照DOM层级来确定权重优先级。

Tags: h1, headline, html

0 Comments

IE下定位层被select遮盖问题解决

日期：2010-03-09 分类：前端制作

需求如图，两行的select后面各有个按钮可以触发position定位的div浮层，浮层上边缘紧贴所在行下边缘。

去掉项目外观，还原为基本的产品原型则是
select_zindex_mockup

如果不做任何处理的话，IE 7/8以及firefox和chrome等浏览器下没问题，但是IE 6下会是这样：
select_zindex_mockup_ie6

google了下。IE 6下，select的优先级比div等元素高，所以position定位在select上的浮层不管z-index设置多少都遮盖不了select元素。常规办法是浮层中嵌入一个隐藏的iframe，利用框架的高优先级来遮盖select。

单个select覆盖div浮层解决如图：
select_zindex_single_ie6
单个select覆盖div层级解决DEMO

然后，回归到需求，两行之间距离非常近，直接如此处理可以看到，无论在任何浏览器下，select 2都会遮盖掉panel 1，如图：
select_zindex_more
文档流中，后出现的元素默认层级比之前的高，这里需要给每行单独设定z-index，让第一行的层级高于第二行，即可解决，如图：
select_zindex_more_ok
多个select覆盖div层级解决DEMO

Tags: select, z-index

3 Comments

再谈Internet Explorer Collection

日期：2009-05-29 分类：前端制作

去年写过Internet Explorer Collection简介，当时还是继续使用了IEtester，但是过了几个月后彻底抛弃了IEtester转向Internet Explorer Collection。

之前用IEtester的时候，系统默认安装IE 7，用山寨的IE 6和IE 8看表现，然而后来有几次发现山寨的IE 6有一些CSS表现和正版的有区别。在目前的状况下保证项目在IE 6下的完美是必须的，而且后来Internet Explorer Collection在每个版本中都加入了IE Developer toobar，这两个原因促使我开始使用Internet Explorer Collection。

我的开发环境是XP安装IE6，然后安装Internet Explorer Collection的IE 7和IE 8。原因：

保证IE 6下的完美表现；
IE 6下的BUG可以使用内置的调试工具Developer toobar来查找原因；
IE 7+在CSS上的表现相对IE 6要容易驾驭的多，基本在Firefox上预览OK的在IE7，IE8下不会有太多问题。

顺带一提，现在的Internet Explorer Collection内置的IE 8版本号已经是8.00.6001.18702，查了下资料是Windows 7以下系统中IE 8的正式版本号。不过我自己电脑上山寨IE 8总是会莫名其妙自动关闭……所以装了个Windows 7来看IE 8的表现。另外，Windows 7内置的IE 8版本号是8.0.7100.0，跟Windows 7 RC的版本号吻合，不知道和6001的有什么差别。

实际上，有条件的同学可以使用Windows 7的正版IE 8，之后使用MS官方的虚拟机Windows Virtual PC来实现E 6.因为MS在Windows 7下的VPC中提供了XP镜像包的单独下载，可以完美的使用XP环境。不过这个镜像包需要CPU支持虚拟化，我的CPU不支持= =

1 Comment

Internet Explorer Collection简介

日期：2008-08-29 分类：前端制作

已更新：再谈Internet Explorer Collection

____________________________________________

之前，写CSS然后测试网站在IE下外观表现的时候一直使用的IEtester。今天发现了个新的IE各版本集成软件，internet explorer collection。43M，下载了尝鲜。

在软件的发布网站上已经可以看到，IECollection集成了从IE 1.0一直到IE8 beta 2的各个版本，很全面，不过实际应用我还是只勾选了6-8三个版本。

启动方式：

安装完成后会在桌面上显示6，7，8三个版本的快捷方式，这个远不如IETester方便，更像是Multiple IE的升级版本。

使用：

记得之前Multiple IE或者IETester都出现过表单不能获取焦点的问题，以及不停的alert；IECollection的IE 6运行良好。

IE 7本机上有，没有测试；

IE 8的测试不如说是测试IE 8 Beta2本身。集成的IE 8第一次运行也会像正常安装一样，分步骤提示你是否导入以前版本IE配置、是否启用Smartscreen等乱七八糟IE 8的新功能。
比较有意思的是在搜索引擎选择这一步，提示我是否使用GOOGLE作为默认搜索引擎，猜测是因为我本机安装的IE 7使用的是GOOGLE做默认搜索，安装IE 8智能判断了。
惊喜的看到，IE 8 Beta 2对CSS的支持，比Beta 1好了许多。而且，切换到IE 7兼容模式浏览，终于不需要重启IE了。

遗憾的是，IE 8经常会卡死。不知道是IE 8 Beta 2自身的问题还是IECollection的问题。

最后还是决定保持观望，先使用IETester，不喜欢任务栏里同时三个IE占着地方。

3 Comments

有序列表的一种应用

日期：2008-07-20 分类：前端制作

做项目的时候，我在CSS里写reset都会先把ul和ol的list-style清除掉，两者外观看上去相同，只是根据需要罗列的列表内容去判定使用哪个以符合语义化。
如果需要显示数字序列号，则交由程序输出数字。

今天在老外blog上看到另外一种思路：这篇文章，通过显示ol的序列号数字，并单独给数字文字定义字体样式实现。

补充：前几天去面试的时候也碰到他们有这个问题，如图

当时出于减少网页并发数请求考虑，我的实现想法有两种：

一是把所有序号图片切到一张大图上作为区域的背景图片左对齐；

二是导出黑色和红色两个数字的背景图片，数字交由程序或者通过上面所写的ol显示序号的方法实现。

但是讨论了下，可能会遇到字体不能符合设计的问题，设计的时候选用的字体可能用户终端没有安装。

0 Comments

跨浏览器透明层的实现

日期：2008-07-14 分类：前端制作

CSS书写：

filter:alpha(opacity=80);
opacity:0.8;

其中filter为IE6的私有属性；
opacity为CSS3的属性，目前标准浏览器如Firefox、Safari都支持。但是Opera 9.0版本后才支持。

数值中IE的80和CSS3里的0.8是相同的，即百分比和小数.
——————————
如果你用的IE7，那么会发现这些代码是无效的。
——神奇的微软，在IE7及以上版本里连自家的filter也不可用了，但是也不支持CSS3。所以这种办法在IE7无效。

问题出在每个页面顶部的DTD上，有兴趣的可以阅读DOCTYPE声明相关的文档。

这里可以通过另外种办法来实现：透明PNG背景图。可以给父容器设置半透明的PNG背景图来实现上面效果。各个标准浏览器都支持（前面提到的Opera 9.0之前不支持opacity，但是他支持PNG透明），IE7也开始支持。

遗憾的是，IE6不支持，但是有JS可以使IE6也支持透明PNG。

0 Comments

表单样式问题汇总

日期：2008-07-14 分类：前端制作

如果采用默认的表单样式，那么不同的操作系统，同一操作系统的不同版本，甚至Windows的皮肤外观，以及不同的浏览器，都会对表单组件采用不同的样式解析。

一.INPUT

1.1 type=”text” 文本输入框

input的高度和文字字号默认一般都是16px。加上边框，18px.

Firefox下，不可以用line-height定义input，所以需要通过微调padding来设置文字垂直居中。

1.2 type=”submit”

XP的submit很不厚道，文字多了会马赛克

二.SELECT

select直接定义宽度，会和同样宽度的input有5像素的偏差。(猜测是右边的下拉箭头的宽度)

select不可以直接定义宽高边框外的样式。需要用JS实现，比较著名的就是niceform美化组件。

三.TEXTAREA

textarea用默认的字数和行数设置大小，IE和Firefox下不同。推荐直接CSS定义width和height。美中不足的是少了字数和行高两个属性，DW里会提示语法错误。
textarea有默认的字号。不想输入的文字看上去跟外面12px的不协调的话，就预置掉。
FF下没有右边滚动条，IE下无论何时都会有的；
见一些网站是使用input代替的textarea，但是换行问题不知道怎么解决的。问过同事，得知可以写程序加入换行；

启动方式：

使用：

分类

链接

其他