無標題文檔

针对 Safari(WebKit)的 CSS 注意事项

Google Chrome 的发布 ,使我们更加的注重基于 WebKit 核心的浏览器的表现情况,但我们很多时候「不小心」就会出现问题。考虑下面极端的情况

.box {
    background: red;
    #
    background: yellow;
    background: #green;
}

经过测试发现,Exploer 系列浏览器会显示黄色(yellow),Firefox 与 Opera 则会显示红色(red),而 Safari 以及 Chrome 则会显示绿色(green)。

按照本人的理解,这是各浏览器 CSS 解释上的差异造成的。首先,Safari 会对于 #red 这样的「常量颜色值」会尝试解析,而其他浏览器则取「#」后面的 16 进制色值。

然后对于

.box {
    #
    background: yellow;
}

的理解,Exploer 系列会直接解析成 background: yellow; 而其他浏览器则等待「;」然后连接起来,所以不起作用。类似的可以使用

.box {
    .
    background: yellow;
}

测试下。但如果语句后面加上分号「;」

.box {
    #; /* 或者 .; */
    background: yellow;
}

则会恢复正常。可以 参考这里 ,获得更进步的详细信息。

总结下的结论,首先,比如你想针对 Exploer 仅 Hack 一条语句,那么可以在其上行简单加个「.」或者「#」,这仅适合临时调试使用。

其次,期前如果不小心写成 #red 这样的色值,可能会无关要紧。但就目前众多的浏览器情况而言,可能就会有上述意想不到的结果,所以 CSS 方面的细节我们要更慎重的对待。

Explorer6 下的 max-height 属性

今天有用户报告,说打开我们的页面会导致浏览器崩溃。查了下,原来是这句 CSS 导致了性能的问题

_height: expression(this.scrollHeight > 200 ? 200 + 'px' : 'auto');

看来还是 Exploer 的 CSS expression 作祟。简单的说明下这个语句,主要是实现 Exploer6 不支持的 max-height 属性而做的个 Hack(是个「历史遗留问题」)。

期前对于 CSS expression 也做过类似的测试 ,使用程度为--慎用--禁用(原因有三,仅 Exploer 支持、性能消耗很大、脚本和表现混杂)。

这一 Hack 姑且可以被认定为,是在 Exploer6 走向末路之前的「救命稻草」(但目前在日常的项目中,如果出现这样的代码,是无论如何都不会被允许的)。

最后, 简单的写了个 DEMO ,以及更多的信息可以 查看这里

注: Exploer7 已经支持 max-height 等属性。

浏览器的等宽空格

很多时候,希望能够在 HTML 中使用空格排版。但浏览器在解析 HTML 时,会把连续的空格解析成一个,所以我们会使用   等这样的占位符。

但是   也不是很可靠,比如空格间距非常大,那么我们必须增加多个占位符,同时页面的体积会变得非常大。

同时,注意到 Safari 中的   宽度是已设定字符的空格宽度(Safari 的默认字体为 Times),也就是说一个中文字符需要两个占位符。

具体情况如下图所示

https://friable.rocks/_/2009_11_05/2975461746b0.jpg

其实,这不是 Safari 的问题,而是字体的问题。解决的方式就是使用下面的属性

font-family: '宋体';

将 Safari 的默认字体 设置成「宋体」等中英文等宽的字体 ,就能解决。Windows 版本的 Safari 字体设置,需要直接使用中文「宋体」这样的名称而不是「Simsun」(了解原因的兄弟请告诉我)。

但至此,我们的根本目标没有解决,就是能否避免使用   这样的占位符,而使用「原生」的空格。考虑针对空白的相应 CSS 属性,具体了解有关 white-space 的用法 ,接下来就比较好处理了。

总结下使用 white-space 实现等宽空格的条件,有两个。需要设置对应的属性

white-space: pre;

然后设置等宽字符(包括等宽空格)即可。综合起来,就是这样

font-family: '宋体', Simsun;
white-space: pre;

由于使用了中文 CSS 名称,所以在实际使用中需要考虑样式的字符编码问题。同时,需要额外考虑的是,苹果机是否有「宋体」(或者其他等宽的字体), 有苹果机的兄弟请帮忙测试下

--Split--

感谢 小马 提供的另外一个思路,就是使用 em 单位。1em 简单的说,就可以认为是一个字符宽度;同理,.5em 就是半个字符。那么,上面的情况就可以使用这样写。

<span>买<ins class="half-word"></ins>宝<ins class="half-word"></ins>贝:</span><br />
<span>我的淘宝:</span><br />
<span>社<ins class="two-word"></ins>区:</span><br />

对应的 CSS 应为

.half-word {width: .5em;}
.two-word{width:2em;}

经测试通过。

--Split--

针对这上述的两种不同方法,个人认为应当按照实际情况考虑采用。比如第一种方法,虽然依赖具体的等宽字体,但没有添加其他额外的结构,对于以后的维护会更加的方便;第二种方法,则更多的考虑了实际的应用情况(同时也不用依赖具体的等宽字体),但是也添加了额外的结构。

所以,如考虑到以后的可维护性,同时「语义」的角度上分析,推崇第一种做法。而实际的应用情况下,同时需要应用比较复杂时,个人会选用第二种。

另,感谢 小虎 的发言

在没有半角空格的复杂的情况下,可以考虑使用中文的全角空格

几条经典的 CSS Tips

MacJi 「偷懒」翻译了部分 ,下午冒着被 BOSS 开除的危险将其补完( 原文链接 )。

使用 line-height 垂直居中

line-height:24px;

使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以 看这里

清除容器浮动

#main {
    overflow:hidden;
}

期前也提到过这样的问题 ,更多信息可以看 这里

不让链接折行

a {
    white-space:nowrap;
}

上面的设定就能避免链接折行,不过个人建议长链接会有相应的这行(有关换行方面的讨论, 参看圆心的记录 )。

始终让 Firefox 显示滚动条

html {
    overflow:-moz-scrollbars-vertical;
}

更多的 Mozilla/Firefox 私有 CSS 属性可以 参考这里 。需跨浏览器的支持,也可以使用

body, html {
    min-height:101%;
}

使块元素水平居中

margin:0 auto;

其实就是

margin-left: auto;
margin-right: auto;

这个技巧基本上所有的 CSS 教科书都会有说明,别忘记给它加上个宽度。Exploer 下也可以使用

body{
    text-align: center;
}

然后定义内层容器

text-align: left;

恢复。

隐藏 Exploer textarea 的滚动条

textarea {
    overflow:auto;
}

Exploer 默认情况下 textarea 会有垂直滚动条(不要问我为什么)。

设置打印分页

h2 {
    page-break-before:always;
}

page-break-before 属性能设置打印网页时的分页。

删除链接上的虚线框

a:active, a:focus {
    outline:none;
}

Firefox 默认会在链接获得焦点(或者点击时)加上条虚线框,使用上面的属性可以删除。

最简单的 CSS 重置

* {
   margin: 0; padding: 0
}

如果想「复杂」,参考 YUI 的做法 (还有 这里 )。原文留言中也有用户说了他们的观点

I have to agree with Niall Doherty, * {margin: 0px; padding: 0px;}
basically means "traverse every css element and give it these 
attributes". That is a very unnecessary strain on the server and 
a bad semantic practice, as you have to give some elements 
padding/margin again, after stripping them.

表格元素内容的定位

CSS 中的 position 属性 可以很容易的将指定的元素定位到理想的位置。但在使用这一属性时需要注意,尤其是在表格元素中。为了说明此问题, 我们先来看个 DEMO

点击按钮后,图片所在的 td 的 CSS 属性 position 定义成 relative,但是除 Exploer 外其内部的绝对定位的层,没有重新定位到「期望的位置上」。

在这里有个详细的讨论 ,主要的原因可以基本上认定为 Exploer 与其他浏览器针对表格元素的理解不同所致。

根据 W3C 的相关描述

The position and size of an element's box(es) are sometimes calculated 
relative to a certain rectangle, called the containing block of the element.

另,感谢 圆心提供另个参考来源

The effect of 'position:relative' on table-row-group, 
table-header-group, table-footer-group, table-row, 
table-column-group, table-column, table-cell, and 
table-caption elements is undefined.

可以认为定位的父容器应为块(block)元素(td 默认的 display 属性为 tab-cell),从上面的内容可以看出,针对'position:relative' 这一属性对于大部分的表格元素(display:table-*)而言是未定义的,而 Exploer 则没有遵循这一规范(所以得到了「期望的结果」)。

其实将 DEMO 中的相应 td 的 CSS 属性改成 display:block; 就能更好的说明问题(注意,将 td 的 display 属性改成 block,严格意义上理解,它已经不是表格的一部分)。

要解决这问题,目前已知的一种做法就是在 td 中再套一层 div 等 block 元素。

这可能这又引起的另个问题,就是无法像表格元素一样垂直居中,不过我们 可以参考这里的解决方案 (更新, 还有 小虎 的另种解决方案 )。

--EOF--

我的照片

嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHubTwitterInstagram 等。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 要知道作为码农取名是件很难的事情,所以不想在取名这事情上太费心思。

作为八零后,自认为还仅存点点可能不怎么被理解的幽默感,以及对平淡生活的追求和向往。 为了避免不必要的麻烦,声明本站所输出的内容以及观点仅代表个人,不代表自己所服务公司或组织的任何立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQGdyYWNlY29kZS5jb20K | base64 -d`

文章

项目