Question

我有一个页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
        <link type="text/css" rel="stylesheet" href="styles.css">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <form id="sign_in">
             <table>
                <tbody>
                <tr>
                    <td>&nbsp;</td>
                    <td class="form_submit">
                        <input id="submit_sign_in" class="btn-submit" name="submit" value="Sign In" tabindex="4" type="submit">
                        or
                        <a class="corporate_login" id="corporate_login" href="">
                            Login with corporate domain
                        </a>.
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </body>
</html>

我的css文件看起来像这样

html, body{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
    font-size:13px;
    font-family:arial;
}

input#submit_sign_in{
    position:relative;
    display:inline-block;
    padding:0 15px 0 15px;
    height:25px;
    line-height:25px;
    font-size:11px;
    background: url('file.png') top left repeat-x;
    text-transform:uppercase;
    color:#fff;
    font-weight:bold;
    border-radius:3px;
    border:none;
    cursor:pointer;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}

a.corporate_login {
    color:#1568bd;
    text-decoration:none;
}

form#sign_in td.form_submit {
    padding:50px 0 0 0;
    height:85px;
    text-align:left;
    vertical-align:top;
}

当我在mozilla firefox中运行它时，它显示正确。

enter image description here

但在Opera和Chrome中它不是

enter image description here

我甚至尝试将此代码放入jsfiddle中 - 它也正确地显示在那里。

要解决我在or标记中包含<span></span>的问题。它有所帮助。但为什么这个解决方案有效什么导致原始问题？

Answer 1

实际上当您编写或而没有span标记时。它被视为td标记的直接成员，因为您没有用任何p或h1，h2，h3标记将其关闭。现在，作为td标记的成员，它将遵循您指定的所有vertical-align和text-align规则。

Chrome正在区别对待它，因为它们有自己的默认提交按钮大小。不仅是span标记，您还可以将其括在<p>标记中以解决问题。但是你必须提供

标签display:inline;属性。

在这里你可以看到结果。 http://jsfiddle.net/4ktmqfsc/4/

红色框显示td标记的边界。

Answer 2

在a.corporate_login和input#submit_sign_in

上使用vertical-align middle

a.corporate_login,input#submit_sign_in{vertical-align: middle;}

为什么当我添加`span`标签时，文本显示正确

2 个答案: