Question

我希望定义css详细信息，以便将td中的纯文本与td中的按钮值文本对齐，以便它们在任何浏览器类型中对齐，或者至少在大多数浏览器类型中对齐。

以下是我的试用版以及IE9 / 8/7和Chrome中的渲染差异。如你所见，给定的html在IE9中看起来没问题，但是IE8 / IE7和Chrome都是错的。添加填充（直接在文本td或文本td中添加的div）将无法解决此问题，因为IE9将是错误的。

那么应该使用什么css定义来确保所有浏览器中的纯文本和按钮值文本都正确对齐？

IE9 IE8 IE7 Chrome

HTML：

<!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
    table {
        border: solid black 1px;
        border-collapse: collapse;
        padding: 0;
        border-spacing: 0;
    }

    td {
        border-style: dotted solid none none;
        border-color: black;
        border-width: 1px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 0px;
        padding-bottom: 0px;
        font-style: normal;
        font-family: Verdana;
        font-size: 12px;
        vertical-align: top;
    }

    input.example {
        color: blue;
        background: white;
        padding-top:1px;
        padding-left:0px;
        border: 0px;
        outline:0;
        font-size: 12px;
        cursor: pointer;
    }
        </style>
    </head>

    <body>
      <p/>
      <table>
         <tbody>
            <tr>
               <td>EXAMPLE</td>
               <td><input type="button" class="example" value="EXAMPLE"></td>
            </tr>
            Chrome
         </tbody>
   </body>
</html>

Answer 1

就TD内部的对齐而言，最好的办法是使用TD的valign属性。在TD标签内指定valign="top"，这样无论每个TD元素有多大，它都会始终保持在顶部。

就其他路线而言，我发现图像和按钮对齐跨浏览器支持是可怕的，但您也可以指定vertical-align css属性。

例如：

img,input{
vertical-align: middle
}

和

<td valign="top">EXAMPLE</td>
<td valign="top"><input type="button" class="example" value="EXAMPLE"></td>

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Answer 2

如何为Chrome配置所有内容，然后为IE CSS类添加条件CSS语句？：

<!--[if IE 7]>
<!--[if IE 8]>
<!--[if IE 9]>

那应该做的工作，虽然它可能不是最好的和优化的方法。我记得有类似的问题与文本对齐，这有助于我。

很抱歉，我把这个放到答案中而不是评论，但由于我的声誉，我仍然无法发表评论。

修改
例如：

由于我不确定你应该指定what_exact_parameters（你需要自己解决），我只想给出一个虚拟的例子：

内联：

td { padding-top: 0px; padding-top: 2px\0/;  }

定位特定的仅IE样式表：



这里的问题是，有时他们会修复这些错误，然后你的条件语句不仅变得无用，而且可能会造成更多麻烦。所以我建议至少不要在那里放任何真正的 drastic ，这样如果他们修复了这些错误，你的页面就不会崩溃了。

以下是一些很好的链接，可以阅读有关条件CSS语句的更多信息：
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer

Answer 3

在某些浏览器中，尝试将按钮设置为类似超链接的样式实际上几乎是不可能的，因为它们在浏览器样式表中有如此多的样式填充程序。如果你可以避免使用按钮，我会建议它。

原因是除了填充和边距之外，浏览器还添加其他样式，例如在Firefox中：

button, input[type="reset"], input[type="button"], input[type="submit"] {
    -moz-appearance: button;
    -moz-binding: none;
    -moz-box-sizing: border-box;
    -moz-user-select: none;
    line-height: normal;
    padding: 0 6px;
    text-align: center;
    text-shadow: none;
}

并且您必须重置所有影响所有浏览器布局的内容 - 之后文本可能仍然不在正确的位置，因为按钮似乎仍然将文本推到比您更低的位置。

Answer 4

某些浏览器中的按钮更高。这没关系 - 不同的浏览器可能会显示不同的按钮。 TD上的vertical-align: top可能很荣幸，但是按钮使你的表格行更高，这使得左侧单元格上的文字显示未对齐，因为它被推到了顶部。至于IE7，我不知道为什么按钮文本这么低，但是嘿，它是MSIE，它不需要符合任何东西或者完全没有工作。

如果您希望文本正确对齐，请使用vertical-align: middle，或使用行高和/或填充使每行的行高度相等。

Answer 5

从Ben的建议开始，最终我找到了解决这个讨厌的小问题的最佳解决方案。首先，我尝试按照他的建议，但作为一个时尚的版本：我尝试从css td中删除vertical-align: top;并将style="valign: top;"添加到td元素。起初我认为这是要走的路，因为现在IE7 / Chrome中的对齐方式还可以，在IE8 / IE9中只有一点点，但后来我意识到valign是一个弃用的属性和一个不存在的子 - style属性中的值因此，我不得不进一步观察，并进行了一些后烧录javascript，我在各种浏览器中调整padding-top。我必须做以下调整：

css input.example：padding-top 0px;身高：14px;
IE7 / quirks / Opera：对于以前所有sibling-td的设置属性style.paddingTop为1px;
IE8 / IE9：什么都不做
Firefox：对于以前所有sibling-td的设置属性style.paddingTop为2px;

html（请注意，Opera和Firefox使用不同的DOM而不是IE，以不同的方式表现自己以获得前一个兄弟姐妹）：

<!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
    table {
        border: solid black 1px;
        border-collapse: collapse;
        padding: 0;
        border-spacing: 0;
    }

    td {
        border-style: dotted solid none none;
        border-color: black;
        border-width: 1px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 0px;
        padding-bottom: 0px;
        font-style: normal;
        font-family: Verdana;
        font-size: 12px;
        vertical-align: top;
    }

    input.example {
        color: blue;
        background: white;
        padding-top:0px;
        padding-left:0px;
        border: 0px;
        outline:0;
        font-size: 12px;
        cursor: pointer;
        height: 14px;
    }
        </style>
    </head>

    <body>
      <p/>
    <table>
     <tbody>
        <tr>
           <td>EXAMPLE</td>
           <td><input type="button" class="example" value="EXAMPLE"></td>
        </tr>
     </tbody>
    </table>
    <script type="text/javascript">
      // use personal custom javascript function to determine browser version
        switch (browser.version()) {
            case "MSIE 7.0":
                var elts = getElementsByClassName('example');
                for (var i=0; i < elts.length; i++) {
                    node = elts[i].parentNode;
                    while (node = node.previousSibling) {
                        node.style.paddingTop = "1px";
                    };
                }
                break;
            case "Opera/9.80":
                var elts = getElementsByClassName('example');
                for (var i=0; i < elts.length; i++) {
                    node = elts[i].parentNode;
                    while (node = node.previousElementSibling) {
                        node.style.paddingTop = "1px";
                    };
                }
                break;
            case "Firefox/10.0":
                var elts = getElementsByClassName('example');
                for (var i=0; i < elts.length; i++) {
                    node = elts[i].parentNode;
                    while (node = node.previousElementSibling) {
                        node.style.paddingTop = "2px";
                    };
                }
                break;
            default:
                // do nothing
        }
    </script>
   </body>
</html>

跨浏览器对齐td中的文本和td中的按钮值

5 个答案: