与“CSS”标签相关日志

由于连续的字符（字母、符号、数字）在默认情况下是不换行的，可能会破坏整个界面布局。
那如何解决这个问题呢？
在 IE 和 Safari 1.3+ 下相对比较容易解决，使用 CSS 属性 word-wrap: break-word;。有朋友会问为什么不是使用 word-break:break-all; ，因为有一个特殊的情况，该属性无法解决换行——连续的英文标点符号。
注：word-break 主要使用在 CJK 文本，即：中文（Chinese）、日文（Japanese）、韩文（Korean）。
而 Firefox 和 Opera 浏览器，无法识别 word-wrap: break-word; 和 word-break:break-all; 属性。可以通过脚本给连续字符的每个字符之间插入 \ u8203 的字符（该字符在非 IE 浏览下不占据空间），使连续变为了不连续，达到了换行的效果。
breakWord = function(dEl){
var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null, false);
var node,s,c... 5 条评论 »

1、仅 Safari 和 Opera 识别的 Hack
@media all and (min-width: 0px) {
/* Safari and Opera rules here */
}

或者
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Opera rules here */
}
注：这里所指代的 Safari 和 Opera 一般为最新版本。
2、仅 Firefox 3 和 IE7 识别的 Hack
selector, x:-moz-any-link, x:default {
/* Firefox 3 and IE7 rules here */
}
注：由于 Firefox 2 和 [...]

在曾经的 淘宝UED 招聘 中有这样一道题目：
“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”
当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。
题目的难点在于两点：

垂直居中；
图片是个置换元素，有些特殊的特性。

至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;

/*设置水平居中*/
text-align:center;

/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

width:200px;
height:200... 25 条评论 »

对于 link 元素 和 style 元素 我相信大家都比较了解，但对于他们的出现位置可能有误解。
在 淘宝 的所有频道中出现这样一个问题：频道头部文件由于是统一支配的（为什么？历史原因！），所以我们无法在每个频道的 head 元素中以 link 或 style 方式加入各自的样式。最后选取了折中的方式，在主体内容中直接写入 style 元素，也就是说 style 元素置于了 body 元素中。
一切看着貌似很完美。其实不然，在 W3C 中对于 link 元素 和 style 元素 出现的位置有详细的说明：
HTML permits any number of STYLE elements in the HEAD section of a document.
The LINK element defines a link. Unlike A, it may only appear in the [...]

发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？
CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。
Specificity 具体的计算规则：

元素的 style 样式属性，加 1,0,0,0。
每个 ID 选择符（#id），加 0,1,0,0。
每个 class 选择符（.class）、每个属性选择符（例 [attr=”"] ）、每个伪类（例 :hover），加 0,0,1,0。
每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。
其他选择符（例 全局选择符 *，子选择符 >），加 0,0,0,0。

最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比... 24 条评论 »

YUI 中的 Grids CSS 主要有三个部分值得大家关注和学习：
1、布局的思想：使用 “负 margin（Negative Margins）” 技术
详细可参阅：《Creating Liquid Layouts with Negative Margins》
2、使用 em ：当用户改变字体大小时，宽度同时改变。
技巧：用 13 像素来平分宽度（保留小数到千分位），而 IE 浏览器用 13.333 。

/* 750 centered, and backward compatibility */
#doc {
width:57.69em;
*width:56.251em;
min-width:750px;
}

57.69 = 750 / 13
56.251 = 750 / 13.333

注：《Setting Page Width with YUI Grids》 一文中提到：IE 下的 em 是宽度除以 13 ，再乘以 .9759 得到。同解于为什么现在的 YUI 源码中 IE 下 750px [...]

background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。
background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-position 计算的参考位置。
语法为：

background-clip: [border | padding] [, [border | padding]]*
background-origin: [border | padding | content] [, [border | padding | content]]*

对于 background-clip：
如果是 padding 值，则 background 忽略 padding边缘，border 是透明的。如果是 border 值，则background 包括 border 区域。如果 background-image 图片有多个，对应的 background-clip 值之间用逗号分隔。
对于 background-origin：
如果是 [...]

1、应该将 CSS 放置于结构的上方（一般放置于 head 元素内）。CSS 是解释型语言，Firefox 和 IE 在等待 CSS 传输完成之前不会渲染任何东西。只有将 CSS 前置，才可在浏览器解析结构时，对页面进行渲染。
This causes the blank white screen problem. The page is totally blank until the stylesheet at the bottom is downloaded, on the order of 6-10 seconds for this page. The browser is waiting for the stylesheet to be loaded before it renders anything [...]

IE8 (下文中的 IE8 暂时仅代表IE8 beta1) 中增加了 CSS3 中的子串匹配的属性选择器（substring matching attribute selectors），具体规则与正则中的匹配很相似：

E[att^='val'] //子串以’val’ 开始
E[att$='val'] //子串以’val’ 结束
E[att*='val'] //子串中包含’val’

IE8 支持绝大多数基本的 CSS2.1 选择器：

:before and :after 被支持，只支持文本，不支持图片，但还存在bug 。
:focus 被支持。
display: inline-block 被支持（只能用于内联元素）。
display: table 被支持。
list-style 完全被支持，包括值 upper-greek （此值其他浏览器均未支持）。
outline 被支持。
border-collapse, border-spacing 和 caption-side 被支持。
white-space 完全被支持。
box-sizing 被支持，不过使用的是私有属性 -ms-box-sizing 。

不支持的包括但不限于... 13 条评论 »

//显示属性
display
list-style
position
float
clear

//自身属性
width
height
margin
padding
border
background

//文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content