html - Mac/PC 上的字体渲染/行高问题(元素外部)

Question

设计

信息小部件的内容应该在中间垂直对齐:

---

编码设计

Windows:Chrome 20/FF 14/IE 9

Mac(Lion/Mt.Lion):Chrome/FF

---

代码

HTML

<div class="info">
    <div class="weather display clearfix">
        <div class="icon"><img src="imgs/icons/thunderstorms.png" align="Thunderstorms" /></div>

        <div class="fl">
            <p class="temperature">82&deg; / 89&deg;</p>
            <p class="conditions">Thunderstorms</p>
        </div>
    </div>
    <div class="time display">
        <p>11:59 <span>AM</span></p>
    </div>
    <div class="date display clearfix">
        <p class="number fl">23</p>
        <p class="month-day fl">Jun <br />Sat</p>
    </div>
</div><!-- //.info -->

CSS

.info {
    display:table;
    border-spacing:20px 0;
    margin-right:-20px;
    padding:6px 0 0;
}
    .display {
        background-color:rgba(255, 255, 255, .2);
        border-radius:10px;
        -ms-border-radius:10px;
        color:#fff;
        font-family:"Cutive", Arial, sans-serif;
        display:table-cell;
        height:70px;
        vertical-align:middle;
        padding:3px 15px 0;
    }
        .display p {padding:0;line-height:1em;}
        .time, .date {padding-top:5px;}
            .time p, .date .number {font-size:35px;}
            .time span, .display .month-day, .conditions {
                font-size:14px;
                text-transform:uppercase;
                font-family:"Maven Pro", Arial, sans-serif;
                line-height:1.15em;
                font-weight:500;
            }
            .display .month-day {padding-left:5px;}
            .icon {float:left;padding:0 12px 0 0}
            .display .temperature {font-size:24px;padding:4px 0 0;}
            .display .conditions {text-transform:none;padding:2px 0 0;}
    .lt-ie9 .display { /* IE rgba Fallback */
        background:transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff);
        zoom:1;
    } 

---

问题

查看上面的编码设计图片，您可以看到它是如何偏离对齐的。进一步查看后，文本呈现在 mac 上的元素之外。

window

Mac

---

注意事项

我通过 Google Web Fonts 样式表嵌入字体。

---

已测试

我尝试了以下方法:

• 为每个元素设置行高。
• 为每个元素设置字体粗细。
• 设置每个元素的高度。
• 每个元素上的高度/padding-top 的组合。
• 使用百分比/em/px 进行填充。

似乎无论我尝试什么，内容永远不会在 mac 和 pc 上完美居中对齐。

---

我的问题

有可能以简单的方式实现我想要做的事情吗？

我是否应该放弃 display:table-cell; 路由并为每个元素和子元素设置特定的高度/填充？我仍然会遇到两个操作系统之间的填充/间距问题。

我应该将此问题归类为哪一类？行高？表细胞？操作系统？等等……

提前致谢!

Answer 1

如果使用不同的字体 (Arial) 可以解决问题，则问题出在字体上，而不是 CSS 上。正如您所注意到的，不同浏览器的字体渲染不同。

一种可能的解决方案是下载 Cutive 字体(我看到它有 SIL 许可证)，然后通过 Font Squirrel 字体生成器运行它。在“专家”模式下，有一个选项可以“修复垂直指标”，这可能正是您正在寻找的。