<![CDATA[inline-block - 99css]]>https://www.99css.com/https://www.99css.com/favicon.pnginline-block - 99csshttps://www.99css.com/Ghost 3.21Thu, 21 May 2026 00:41:41 GMT60<![CDATA[YUI 3 Grids]]>

YUI 3的grids使用了inline-block，不过在实际使用中要注意两个小问题：

  1. IE6/7下划线对不齐bug
  2. 间隙问题，YUI是这么写的
.yui3-g {
    letter-spacing: -0.31em; /* webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
}

这个数值跟字体有关，之前总结过

不过每次都跟字体来调有些麻烦，写为-.5em或者更大就可以一劳永逸了

.yui3-g {
    letter-spacing: -.5em; /* webkit: collapse white-space between
]]>https://www.99css.com/690/6983728c0b74c7000133ae98Thu, 04 Nov 2010 11:20:34 GMT

YUI 3的grids使用了inline-block，不过在实际使用中要注意两个小问题：

  1. IE6/7下划线对不齐bug
  2. 间隙问题，YUI是这么写的
.yui3-g {
    letter-spacing: -0.31em; /* webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
}

这个数值跟字体有关，之前总结过

不过每次都跟字体来调有些麻烦，写为-.5em或者更大就可以一劳永逸了

.yui3-g {
    letter-spacing: -.5em; /* webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    word-spacing: -.5em; /* IE < 8 && gecko: collapse white-space between units */
}

——- 2013-4-26 更新 ——-
因最新版的 Chrome 已经支持 font-size:0，故可以用 font-size:0 来去除间距

]]><![CDATA[IE6/7下划线对不齐bug]]>

这篇帖子《关于IE下英文字体跟中文字体不能对齐的根源以及解决办法》说的已经很详细了，不过不止中英文混合才会出现这个bug，比如《Internet Explorer: Broken Underlines》。

解决方法一般有以下几种：

  1. 对下划线元素使用宋体，缺点是宋体的英文数字比较难看，我个人也比较鄙视这种做法
  2. 触发下划线元素的hasLayout，缺点是inline元素会变成inline-block元素，折行时会整块掉下来
  3. 使下划线元素浮动，缺点是inline元素变成block元素，而且还要清除浮动
  4. 去除下划线元素相邻元素（相邻元素的子元素或父元素等等）的vertical-align（或重写为baseline），垂直居中用position:relative结合top来实现

在使用inline-block元素做sprite容器时经常会遇到这个问题，2、4是比较好的方案，记得要分清楚使用场合哦~

当然IE6下还会出现行高失效bug，old9给出了一种方法《A fix to the IE6 line-height/replaced element bug》，不过在某些追求精确到像素的情况下还是用PIE的方法《Microsoft Internet Explorer 6: Line-height / Replaced Element Bug》比较好。

]]>https://www.99css.com/299/6983728c0b74c7000133ae79Fri, 05 Feb 2010 23:26:42 GMT

这篇帖子《关于IE下英文字体跟中文字体不能对齐的根源以及解决办法》说的已经很详细了，不过不止中英文混合才会出现这个bug，比如《Internet Explorer: Broken Underlines》。

解决方法一般有以下几种：

  1. 对下划线元素使用宋体，缺点是宋体的英文数字比较难看，我个人也比较鄙视这种做法
  2. 触发下划线元素的hasLayout，缺点是inline元素会变成inline-block元素，折行时会整块掉下来
  3. 使下划线元素浮动，缺点是inline元素变成block元素，而且还要清除浮动
  4. 去除下划线元素相邻元素（相邻元素的子元素或父元素等等）的vertical-align（或重写为baseline），垂直居中用position:relative结合top来实现

在使用inline-block元素做sprite容器时经常会遇到这个问题，2、4是比较好的方案，记得要分清楚使用场合哦~

当然IE6下还会出现行高失效bug，old9给出了一种方法《A fix to the IE6 line-height/replaced element bug》，不过在某些追求精确到像素的情况下还是用PIE的方法《Microsoft Internet Explorer 6: Line-height / Replaced Element Bug》比较好。

另外，使用vertical-align:middle来垂直居中在各浏览器中差异也比较大，使用时需谨慎，而用数值则好多了，推荐阅读old9的《CSSTDG读书笔记七》

]]><![CDATA[用display:inline-block做产品列表]]>

由于D2的关系看到这篇文章《[纯技]产品列表到底应该怎么做？》，评论发不成功，又恰逢最近频繁遇到类似的项目，总结如下：

传统的实现方式是用float来实现，换一种思路用display:inline-block，比如这篇《Cross-Browser Inline-Block》（中文翻译）。在Firefox/Safari/Chrome/IE8中会遇到《说说display:inline-block》提到的第一个空隙问题，不过现在已经有了解决方法（详见《Firefox Bug: inline/inline-block的间隙》的评论并略作改进）：

ul{letter-spacing:-.25em} 
li{letter-spacing:normal;}

同时我也尝试了《Layout of repeating blocks》提到的word-spacing，不过仅Firefox/IE8有效，而在Chrome/Safari中无效

另外要注意的是**-.25em**是字体设置为Arial时的情况，为其他字体时会有些不同，

]]>https://www.99css.com/241/6983728c0b74c7000133ae74Sat, 19 Dec 2009 19:03:37 GMT

由于D2的关系看到这篇文章《[纯技]产品列表到底应该怎么做？》，评论发不成功，又恰逢最近频繁遇到类似的项目，总结如下：

传统的实现方式是用float来实现，换一种思路用display:inline-block，比如这篇《Cross-Browser Inline-Block》（中文翻译）。在Firefox/Safari/Chrome/IE8中会遇到《说说display:inline-block》提到的第一个空隙问题，不过现在已经有了解决方法（详见《Firefox Bug: inline/inline-block的间隙》的评论并略作改进）：

ul{letter-spacing:-.25em} 
li{letter-spacing:normal;}

同时我也尝试了《Layout of repeating blocks》提到的word-spacing，不过仅Firefox/IE8有效，而在Chrome/Safari中无效

另外要注意的是**-.25em**是字体设置为Arial时的情况，为其他字体时会有些不同，下面仅列出了常用的几个

常用字体与letter-spacing的关系
宋体/Verdana-.5em
Arial-.25em
Tahoma-.333em

于是display:inline-block加上vertical-align就OK鸟

ul{letter-spacing:-.25em}
li{display:inline-block;#display:inline;#zoom:1;letter-spacing:normal;vertical-align:top;}

如果li中只有img，vertical-align:middle可以实现未知高度图片列表垂直居中，比如Picasa图片列表的效果（单个图片垂直居中请看怿飞的《图片垂直居中的使用技巧》，不过个人认为这个通常只会出现在面试题中:P）

——- 2013-4-26 更新 ——-
因最新版的 Chrome 已经支持 font-size:0，故可以用 font-size:0 来去除间距

]]><![CDATA[自适应圆角]]>

前言

有时候我们不得不面对圆角，也很傻很天真的认为利用 CSS3 的新特性对浏览器分级支持是最好解决方案，但现实≠理想…

需求

  1. 3px 圆角
  2. 宽度自适应（随着文字字数扩展宽度并自动换行）
  3. 换肤
  4. 不使用图片（对可维护性/性能均有影响）

困惑

经典的解决方案看起来像这样：

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>传统方案及bug</title>
<
]]>https://www.99css.com/146/6983728c0b74c7000133ae6dSat, 14 Nov 2009 23:43:37 GMT

前言

有时候我们不得不面对圆角，也很傻很天真的认为利用 CSS3 的新特性对浏览器分级支持是最好解决方案，但现实≠理想…

需求

  1. 3px 圆角
  2. 宽度自适应（随着文字字数扩展宽度并自动换行）
  3. 换肤
  4. 不使用图片（对可维护性/性能均有影响）

困惑

经典的解决方案看起来像这样：

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>传统方案及bug</title>
<style>
body{margin:100px;background-color:red;}
div, p, b{margin:0;padding:0;}
b{display:block;}
.rc{display:inline-block;#display:inline;#zoom:1;}
/* float 效果相同
.rc{float:left;} */
.rc1, .rc2, .rc .bd{border-style:solid;border-color:black;background-color:yellow;}
.rc1, .rc2{height:1px;overflow:hidden;}
.rc2, .rc .bd{border-width:0 1px;}
.rc1{margin:0 2px;height:0;border-width:1px 0 0;}
.rc2{margin:0 1px;}
.rc .bd{padding:0 6px;line-height:1.5;}
</style>
</head>

<body>

<div class="rc">
    <b class="top"><b class="rc1"></b><b class="rc2"></b></b>
    <div class="bd">
        <p>FML!!!</p>
    </div>
    <b class="bottom"><b class="rc2"></b><b class="rc1"></b></b>
</div>

</body>

</html>

使 rc float: left 或 display: inline-block 或许能满足需求，不过 IE 6&7 出现 bug：IE6中依然显示为dispaly:block，而IE7中top 和 bottom缩成一坨，不肯扩展开来，而在 rc1/rc2/rc3 中插入文字

<b class="rc1">XXX</b>

则只能扩展到文字XXX的宽度，无法与 bd 对齐！
如果你能搞定，麻烦留言告诉我一下 :)

解决

试了几个方法均不通，也搜索不到这个 bug，这时想到了 Google 系产品的 1px 圆角按钮：

这是前 Google 视觉设计师 Doug Bowman 的功劳，后转会到Twitter（AD一下：@ytzong），Doug Bowman 为此写过一篇博文《Recreating the button》 demo在此。不过demo 也仅仅是 demo，产品中使用的还是某对天才工程师夫妇的神作，他们有足够的时间来做这项工作：

The magical inline-block solved everything, except in IE. That’s where the genius of Google engineers came in. They knew how to get tricks working in all browsers, and this technique interested a couple of them enough that they dedicated the time to make it work.

打开 Gmail，用 firebug 艹艹看了一下，心里暗骂一句：天才就是天才！
写了个简单的 demo（为了演示方便这里采用了盒谐的颜色）：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>自适应圆角</title>
<style>
body{margin:100px;background-color:red;}
div, p{margin:0;padding:0;}
.div1, .div2, .div3{display:inline-block;#display:inline;#zoom:1;position:relative;border-style:solid;border-color:black;}
.div1{border-width:1px;}
.div2, .div3{#left:-2px;border-width:0 1px;background-color:yellow;}
.div2{margin:0 -2px;}
.div3{margin:1px -2px;padding:0 6px;line-height:1.5;}
.arrow1, .arrow2{position:absolute;top:7px;width:0;height:0;overflow:hidden;border-top:6px transparent dotted;border-bottom:6px transparent dotted;}
.arrow1{left:-9px;border-right:6px black solid;}
.arrow2{left:-8px;border-right:6px yellow solid;}
</style>
</head>

<body>

<div class="div1">
    <div class="div2">
        <div class="div3">
            <p>FML!!!</p>
        </div>
    </div>
    <div class="arrow1"></div>
    <div class="arrow2"></div>
</div>

</body>

</html>

效果如下：

不仅满足了需求，代码量及结构嵌套也很少。

代码说明

  1. div1 实现上下两条边，div2 实现 2px 圆角处的 4个点（一般人只有3点），div3 实现左右两条边，div1 设置左右边框的原因是避免IE 6&7 中的一个盒模型的小 bug，有兴趣研究的话可去掉左右边框看下效果
  2. arrow1 实现小三角的边框，arrow2 实现小三角的背景，此处利用了 border 来模拟小三角，这其中会遇到IE 6 的边框不透明 bug。另外，你也可以看看oocss的写法
  3. 宽度自适应利用的是 display: inline-block，注意IE 6&7 中的处理方式

  4. left:-2px 之前的 # 为 IE 6&7 hack，多写为*，这里用#一是表明偶的与众不同，二是微软的 Expression Web格式化 CSS 的时候若{}中出现*则会把代码搞乱，此处 IE 6&7 中出现了 margin-left 负值无效的 bug ，通过 position:relative 加 left: -2px 实现

可以看出：IE 6&7 bug 众多的特点在此例中表现的淋漓尽致！

最后的话

阮一峰老师也写过一篇《制作Gmail式按钮》，配合强大的 jquery 来实现按钮各种状态，最后的总结也很精彩，修改一下下：

虽然这种按钮（圆角）的视觉效果比较理想，有很多设计上的优点，但是局限性也很大。一方面，它需要大量的冗余代码，与语义网的原则相违背…

完美方案还是利用浏览器的自身特性提供对不同的浏览器分级支持，渐进增强（比如 IE 下显示为直角，对CSS 3支持较好的浏览器显示为圆角），这才是开发效率、可维护性、语义、性能的最佳平衡。

]]><![CDATA[说说display:inline-block]]>

前言：

Firefox 3发布后，我开始肆无忌惮的使用inline-blcok…

基本用法：

  1. inline元素的inline-block： span{displsy:inline-blcok;}
  2. block元素的inline-block： div{displsy:inline-blcok;#displsy:inline;#zoom:1;}

开头的为针对IE6/7的hack，多数人用*，用*的话我使用的格式化工具会出错。

遇到的几个问题：

  1. **代码格式化对间距的影响：**HTML：
<ul>
    <li class="current">1</li>
    <li>2</li>
    <li>3&
]]>https://www.99css.com/23/6983728c0b74c7000133ae4dThu, 16 Apr 2009 16:44:00 GMT

前言：

Firefox 3发布后，我开始肆无忌惮的使用inline-blcok…

基本用法：

  1. inline元素的inline-block： span{displsy:inline-blcok;}
  2. block元素的inline-block： div{displsy:inline-blcok;#displsy:inline;#zoom:1;}

开头的为针对IE6/7的hack，多数人用*，用*的话我使用的格式化工具会出错。

遇到的几个问题：

  1. **代码格式化对间距的影响：**HTML：
<ul>
    <li class="current">1</li>
    <li>2</li>
    <li>3</li>
</ul>

注意代码的缩进为4个空格

CSS：

/*请自行引入YUI reset*/
body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
li{display:inline-block;#display:inline;#zoom:1;padding:1px 5px;border:1px #ccc solid;background-color:black;cursor:pointer;color:white;}
li.current{background-color:#c31909;}

以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE8）：

可见除IE6/7外的浏览器的li之间有4px的间隔。

HTML将缩进去除则正常：

<ul>
<li class="current">1</li><li>2</li><li>3</li>
</ul>

以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE8）：

由此分析，这4px可理解为一个空格。

当然，我们的HTML代码是给人看的，加上编辑器有格式化代码工具，缩进不能去除，而且在实际应用中li之间往往有一定的间距，所以我的做法是顺水推舟，仅对IE
6/7 hack：

li{#margin-right:4px;}
  1. **overflow引起Firefox 3 bug：**HTML：

<a href="#">订阅</a>

CSS：

/*请自行引入YUI reset*/
body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
a{display:inline-block;width:3.5em;padding:3px 0;background-color:red;font-weight:bold;text-decoration:none;text-align:center;color:white;}
a:hover{color:black;}

以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE6）：

IE 7/8 的padding有点小问题，不过基本可以忽略。

如果给a加上overflow:hidden（此处的overflow:hidden没有必要，仅为演示使用）

/*请自行引入YUI reset*/
body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
a{display:inline-block;width:3.5em;<strong>overflow:hidden;</strong>padding:3px 0;background-color:red;font-weight:bold;text-decoration:none;text-align:center;color:white;}
a:hover{color:black;}

Firefox 3显示效果：

text-align:center失效！其余浏览器皆正常（这里有个小插曲，开始我误以为是td中的inline-block元素不能居中，后来发现是overflow:hidden的问题），经测试overflow:auto也会出现此问题，不过这个更少用到。
3. **IE 6的line-height失效：**HTML：

<p>欢迎使用<span></span>飞信</p>

CSS：

/*请自行引入YUI reset*/
body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
p{background-color:yellow;line-height:5;}
span{display:inline-block;width:16px;height:16px;background-image:url('http://images.n20svrg.139.com/simple2008/coremail/images/simple_icons.png');background-repeat:no-repeat;background-position:-500px -50px;vertical-align:middle;}

以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE8）：

未找到根治方法，可变通一下用padding解决：

p{background-color:yellow;padding:2em 0;}

总结：

即便如此，我还是会继续使用下去-:P

]]>