我有一个页面
<!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> </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 中运行它时，它可以正常显示。
但在 Opera 和 Chrome 中不是
我什至尝试将此代码放入 jsfiddle - 它也在那里正确显示。
为了解决我包裹的问题or在 <span></span>标签。它有帮助。
但为什么这个解决方案有效？是什么导致了原始问题？
最佳答案
实际上当你写 or 时没有 span 标签。它被视为 td 标签的直接成员，因为您没有使用任何 p 或 h1,h2,h3 标签将其关闭。现在作为 td 标签的成员，它将遵循您指定的所有垂直对齐和文本对齐规则。
Chrome 以不同的方式对待它，因为它们有自己的默认提交按钮大小。不仅仅是 span 标签，你还可以将它包含在 <p> 中标签也可以解决问题。但是你必须给
标签 display:inline;属性(property)。
在这里你可以看到结果。 http://jsfiddle.net/4ktmqfsc/4/
红色方框表示的是td标签的边界。
关于html - 为什么当我添加 `span` 标签时文本显示正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28810906/