1

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

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

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

IE9 IE8 IE7 铬合金

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>
4

5 回答 5

1

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

至于其他对齐方式，我发现图像和按钮对齐对于跨浏览器支持来说很糟糕，但您也可以指定vertical-aligncss 属性。

前任：

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

于 2012-06-07T15:22:18.587 回答
1

为 Chrome 配置所有内容，然后为您的 IE CSS 类添加条件 CSS 语句怎么样？

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

这应该可以完成工作，尽管它可能不是有史以来最好的优化方法。我记得在文本对齐方面有类似的问题，这对我有帮助。

抱歉，我将其放入答案中而不发表评论，但由于我的声誉，我仍然无法发表评论。

编辑
例如：

因为我不确定你应该分配什么_exact_parameters（你需要自己弄清楚），我只举一个虚拟的例子：

内联：

td {     
    padding-top: 0px;
    padding-top: 2px\0/; <!-- IE-8 only -->
}


针对特定的 IE-only 样式表：

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="your-stylesheet-for-ie7-and-down.css" />
<![endif]-->


这里的问题是，有时它们会修复这些错误，然后您的条件语句不仅变得无用，而且还可能带来更多麻烦。所以我建议至少不要在那里放任何非常激烈的东西，这样如果他们修复了这些错误，你的页面就不会崩溃了。

这里有几个很好的链接，可以阅读更多关于条件 CSS 语句的信息： http:
//css-tricks.com/how-to-create-an-ie-only-stylesheet/
http://webdesignerwall.com/tutorials/css-特定于互联网浏览器

于 2012-06-07T15:25:50.077 回答
1

在某些浏览器中，试图将按钮设置为像超链接一样的样式实际上几乎是不可能的，因为它们在浏览器样式表中放置了如此多的样式垫片。如果您可以避免使用按钮，我会建议您这样做。

这样做的原因是除了 padding 和 margin 之外，浏览器还添加了其他样式，例如在 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;
}

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

于 2012-06-07T15:35:14.453 回答
1

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

如果vertical-align: middle您希望文本正确对齐，或者使用 line-height 和/或 padding 使每个人的行同样高，请使用。

于 2012-06-07T16:33:07.483 回答
0

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

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

html（请注意，Opera 和 Firefox 使用与 IE 不同的 DOM，以不同的方法来获取前一个兄弟）：

<!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>
于 2012-06-08T06:23:27.753 回答