Chrome 上的 CSS 字体大小错误(或 IE 错误)

标签 css internet-explorer google-chrome firefox

我敢肯定每个人的钱都在 IE 的错误上。有同样的机会我只是不知道我在做什么。在 IE 中,所有文本(H2 除外)都采用 font-primary 样式。在 Chrome 中,表格中的文本字体大小错误(或者我认为如此)——在 rev 工具中是这样描述的:

color: rgb(0, 0, 0);
display: table-cell;
    font-family: Arial, Helvetica, Sans-serif;
font-size: 16px;
font-weight: normal;
height: 76px;
vertical-align: top;
width: 390px;

该字体大小应该更小(在我看来)并且在 IE10 中。

这是 html:

<div class="step-page font-primary">
    <div class="content-panel-0">
        &nbsp;
    </div>
    <div class="content-panel-1">
        <h2>PERSONAL SHIPPING</h2>
        <span>Descriptions</span>
        <div>
            <table class="content-desc">
                <tbody>
                    <tr>
                        <td>Standard</td>
                        <td>Standard transport service</td>
                    </tr>

                    <tr>
                        <td>Delivery</td>
                        <td>Residential delivery service</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

这是 CSS:

html
{
    padding:0;
    margin:0;
}

body
{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: none;
}
h2
{
    border: 0px 0px 1px 0px;
    font-weight: normal;
}
.content-panel-0
{
    clear: none;
    float: left;
    padding: 0px 0px 0px 0px;
    width: 50px;
}
.content-panel-1
{
    clear: none;
    float: left;
    padding: 0px 0px 0px 0px;
    width: 520px;
}
.content-panel-2
{
    clear: none;
    float: left;
    padding: 0px 0px 0px 0px;
    text-align: center;
    width: 330px; /*375*/
}
.content-desc td
{
    vertical-align: top
}
.content-desc td:first-child
{
    width: 120px;
}
.font-primary
{
    color: #000000; /*black*/
    font-family: "Arial", "Helvetica", "Sans-serif";
    font-size: 0.750em; /*0.625em; 10px; 12px;*/
    font-weight: normal;
}
.font-primary-bold
{
    color: #000000;
    font-family: "Arial", "Helvetica", "Sans-serif";
    font-size: 0.750em; /*0.625em; 10px; 12px;*/
    font-weight: bold;
}

有些不对劲 - 这是什么? FWIW,我相信 FF 也有同样的问题。这进一步指出了 IE 问题,但我不得不说,IE 的行为更可取,而且似乎对我来说更正确。

最佳答案

我总是这样对自己。提出问题,然后找出答案。

我需要添加这个:

<!DOCTYPE html>

修复了一切。

关于Chrome 上的 CSS 字体大小错误(或 IE 错误),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19783021/

相关文章:

Chrome 控制台的 Javascript 帮助?单击所有链接网站

google-chrome - 让 Firefox 缓存 exe 下载

CSS - 根据其 "rel"属性设置链接样式?

javascript - IE8/9 中的 CSS3 动画

css - 在 Android 默认浏览器上更改手机方向后位置固定不变

JQuery IE 绑定(bind)此

javascript - JS 关闭窗口

javascript - Chrome 忽略 URL 中的哈希值

CSS/google geochart 将工具提示粘贴到框底部

javascript - 如何获取html标签的字体大小