Firefox 3的两个新隐藏功能

Firefox 3候选发布版1于上周向全世界公开，这意味着最终版本仅一个月之遥。 如果您还没有检查过您的网站在新浏览器中是否可以正常运行，那么现在是时候了！

除了少数（可理解的） 愤怒的Linux用户以外，共识似乎是Firefox 3对最终用户而言是巨大的飞跃。 浏览器是更快 ，更好看，而且运动一些真棒新的最终用户功能超过其前任。

对于我们开发者， 已经说了很多有关的主要改进在Firefox 3的东西来了像内置支持功能的Web应用程序脱机工作与本地缓存的数据 ，和全页缩放功能 ，使得它更容易设计为视觉障碍的用户，都很高兴看到，但是在这篇文章中，我将借此机会来看几个容易被忽略的功能。

软连字符

Firefox 3的CSS改进列表中不包含此功能：“现在支持HTML软连字符（ ­ ）。”

软连字符是HTML始终在纸上支持的那些晦涩的瑰宝之一，但是由于浏览器支持不多，因此没有人注意到它。 但是，随着即将发布的Firefox 3， 所有主要浏览器（包括Internet Explorer，Safari和Opera）都将支持软连字符。

那么，什么是软连字符？

柔和的连字符是通常不可见的文本字符。 它表示文本中的一个点（通常在一个长字的中间），在此处可以使用连字符将行换行。

当支持软连字符的浏览器遇到长字或其他较长的文本，而没有明显的换行点，而该换行点在水平方向上不适合页面上的某个块时，它将在文本中寻找软连字符并将其显示为常规连字符，然后换行。

看一下此代码示例：

<div style="width: 10em; border: 1px solid red;">
  Supercalifragilisticexpialidocious
</div>

在任何浏览器中显示它，长单词将从div的侧面突出。

这种情况在现实世界的网页设计中一直存在。 假设您有一个导航菜单，它占据页面宽度的25％。 在足够小的浏览器窗口大小的情况下，其中一个菜单项中的一个特别长的单词会从菜单杂乱地突出到页面的另一部分，或者迫使菜单增加其宽度，从而可能破坏页面布局。

轻巧的连字符可以解救！

<div style="width: 10em; border: 1px solid red;">
  Supercalifragilistic&shy;expialidocious
</div>

Firefox 3将是最后一个添加对软连字符的支持的主要浏览器，但是您不必等待它发布就可以开始使用它们！ Firefox 2只会忽略该字符，使其不可见（并使文本从其框内突出）。 作为后备还不错，特别是与Safari相比，后者以前将其显示为常规连字符！ 幸运的是，Safari 2或更高版本可以正确处理它。

根据您编辑HTML的方式，您可能只想插入软连字符而不是HTML字符实体引用（ ­ ）。 它会节省一些字节，好的代码编辑器（例如jEdit ）会将软连字符显示为普通的连字符，因此您可以在代码中看到它们。 有些甚至足够聪明，可以在检查拼写时忽略软连字符！

您可以在Windows中键入软连字符，方法是：按住Alt键，然后在数字键盘上键入0173，或者在数字键盘上键入加号，然后再键入00AD，再释放Alt。 如果您不记得（我肯定不能），或者如果您使用的是Mac，则可以在“字符映射表”（Mac OS X中的“字符调色板”）中找到软连字符。

如果您确实决定在代码中使用实际的软连字符，请确保您知道字符编码 ，因为与大多数Latin-1字符不同，软连字符在UTF-8中的编码方式有所不同，因此您需要正确保存代码编码以使软连字符起作用。

内联块

内联代码块是其他所有主要浏览器都支持的另一个晦涩但有用的新功能，它已在Firefox 3中广泛使用。 当分配给元素时， display类型的inline-block会导致该元素被内联定位（如span ），但是元素的内容就像元素是一个块一样被布局。

该功能在许多情况下会派上用场，在这些情况下，由于缺乏更好的选择，目前使用float属性。 例如，考虑基于以下HTML代码的缩略图库布局：

<ul class="gallery">
  <li>
    <div class="caption">A short caption</div>
    <div class="thumb"><img src="thumb1.jpg"/></div>
  </li>
  <li>
    <div class="caption">A short caption</div>
    <div class="thumb"><img src="thumb2.jpg"/></div>
  </li>
  …
</ul>

使用许多设计师熟悉的技术，我们可以通过将列表项（ li ）赋予所有特定width并将其浮动到左侧来在网格中布置列表项（ li ）：

.gallery li {
  float: left;
  width: 100px;
}

列表项相对于左边距水平堆叠，当可用页面宽度被占用时，浏览器将下一个列表项向下移动，直到有足够的空间容纳它为止。 这将产生如下所示的整洁的网格布局：

现在，只要图像标题的长度相同，就很好。 一旦考虑到现实世界中对不同长度字幕的需求，该技术就会遇到问题：

如图所示，如果其中一个列表项比其他列表项高，则可能会破坏网格布局。 由于浏览器只会将列表项向下移动到足以为其留出空间的位置，因此列表项最终可能会与从行底部伸出的较早列表项堆叠在一起。

在仍然使用浮点数的情况下解决此问题充其量是麻烦的。 您可以在网格的每一行的开始处在列表项上设置clear属性，以强制其清除前面的列表项。 这不仅使代码混乱，而且假设您知道哪个列表项将开始每一行。 这种网格状布局的一个不错的功能之一是，它可以根据可用空间自动将列表项排列成行，并且可以在可伸缩的页面布局中进行更改。

display: inline-block是这里需要的。 像浮动块一样，内联块在页面上水平堆叠。 但是，与浮点图不同，嵌入式块被整齐地排列成水平线-不在它们适合的地方堆叠。

代码如下所示：

.gallery li {
  display: inline-block;
  width: 100px;
}
 
/* In an IE-only style sheet */
.gallery li {
  display: inline;
}

由于IE7及更早版本中的错误，第二条规则是必需的。 正确设置display: inline-block使列表项的内容表现为好像列表项是块一样，但是要使列表项表现为内联元素，您必须随后（在不同规则中）设置display: inline 。 由于这样做会在其他浏览器中删除inline-block显示模式，因此第二条规则必须放在仅IE样式表中 （或以CSS hack为目标）。

我们还必须对标记做些微调整。 由于现在将列表项视为内联元素，因此它们之间的空格将变得很重要，并在页面上的列表项之间添加额外的空间。 只需摆脱空白即可避免：

<ul class="gallery">
  <li>
    <div class="caption">A short caption</div>
    <div class="thumb"><img src="thumb1.jpg"/></div>
  </li><li>
    <div class="caption">A short caption</div>
    <div class="thumb"><img src="thumb2.jpg"/></div>
  </li><li>
  …
</ul>

结果如下，不可见的线框显示为虚线轮廓：

还不错吧？ 突出的一个区别是列表项与每个行框的底部对齐，因此它们的底部边缘对齐。 在此示例中，这实际上效果很好，因为字幕位于图像上方，但是如果字幕位于图像下方，则看起来很难看。

事实证明，这是一个功能，而不是错误。 您可以使用vertical-align属性控制行中的内联块vertical-align 。 只需将vertical-align: top设置在列表项的vertical-align: top就可以得到以下内容：

自己尝试

正如您所看到的，在许多情况下，内联块提供了更整洁，更灵活的浮点替代方案。 随着Firefox 3可能会在现有的Firefox用户中迅速普及，并且其他主要浏览器都对display: inline-block 提供了不错的支持 display: inline-block ，您将可以在短短几个月的时间内在生产中使用类似的技术！

From: https://www.sitepoint.com/two-hidden-features-new-in-firefox-3/