评论作者姓名在 Chrome 中呈现良好，但在 IE 8 中呈现半空白答案

【问题标题】：Comment author name renders nicely in Chrome, but half blank in IE 8评论作者姓名在 Chrome 中呈现良好，但在 IE 8 中呈现半空白
【发布时间】：2010-07-31 07:17:34
【问题描述】：

在下面的代码中，$row["username"] 是评论的作者。它在 Chrome 中呈现良好，但在 IE 8 中，仅显示上半部分。知道如何让它全部出现在 IE 8 中吗？

提前致谢，

约翰

代码：

echo "<table class=\"commentecho\">";
$count = 1;
while ($row = mysql_fetch_array($result)) { 
    $dt1 = new DateTime($row["datecommented"], $tzFrom1);  
    $dt1->setTimezone($tzTo1);
    echo '<tr>';
    echo '<td rowspan="3" class="commentnamecount">'.$count++.'.</td>';
    echo '<td class="commentname2"><a href="http://www...com/.../members/index.php?profile='.$row["username"].'">'.$row["username"].'</a></td>';
    echo '<td rowspan="3" class="commentname1">'.stripslashes($row["comment"]).'</td>';
    echo '</tr>';
    echo '<tr>';
    echo '<td class="commentname2">'.$dt1->format('F j, Y').'</td>';
    echo '</tr>';
    echo '<tr>';
    echo '<td class="commentname2a">'.$dt1->format('g:i a').'</td>';
    echo '</tr>';
    }
echo "</table>";

CSS：

table.commentecho {
    margin-top: 230px;
    margin-left: 30px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: #000000;
    width: 600px;
    table-layout:fixed;
    background-color: #FFFFFF;
    border: 2px #FFFFFF;
    border-collapse: collapse;
    border-spacing: 2px;
    padding: 1px;
    text-decoration: none;
    vertical-align: text-bottom;    
    margin-bottom: 30px;

}

table.commentecho td {
   border: 2px solid #fff;  
   text-align: left; 
   height: 14px;
   overflow:hidden;

}

table.commentecho td a{
   padding: 2px;
   color: #004284;
   text-decoration: none;
   font-weight:bold;
   overflow:hidden;
   height: 14px;
}

table.commentecho td a:hover{
   background-color: #004284;
   padding: 2px;
   color: #FFFFFF;
   text-decoration: none;
   font-weight:bold;
   overflow:hidden;
   height: 14px;
}

.commentname2 { width: 120px;
            color: #000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size: 11px;
            font-weight: normal;
            height: 20px;
            padding-top:0px;
            padding-bottom: 0px;
            vertical-align: top;

}

.commentname2 a{ width: 120px;
            color: #004284;
            font-family:Arial, Helvetica, sans-serif;
            font-size: 11px;
            font-weight: bold;
            height: 20px;
            padding-top:0px;
            padding-bottom: 0px;
            vertical-align: top;

}

.commentname2 a:hover{ width: 120px;
            color: #004284;
            font-family:Arial, Helvetica, sans-serif;
            font-size: 11px;
            font-weight: bold;
            text-decoration: underline;
            height: 20px;
            padding-top:0px;
            padding-bottom: 0px;
            vertical-align: top;

}

【问题讨论】：

几个提示： 1> 你不需要为每一行html单独回显。只是不要关闭引号并在下一行继续字符串。 2> 使用 ?> 为您的 HTML 部分退出 PHP 模式要干净得多，然后在需要回显 var 或恢复其他编码时使用如果您必须在其中使用引号双引号，而不是用 \ 转义它，只需使用单引号。只是指出这些是因为我查看了我的旧代码并看到了相同的东西！
另外——你不需要重复 a:hover 的所有样式——只有不同的。在这种情况下，文本装饰：下划线。但是浏览器默认会这样做，除非你在之前的声明中覆盖了默认值。

标签： css internet-explorer-8 google-chrome cross-browser

【解决方案1】：

您指定 TD 为 14px 高，溢出被隐藏，但 commentname2 类为 20px 高。

出于这个原因，IE 隐藏了 6 个像素。如果子元素将是 20px，则使容器至少为 20px，或者至少删除 overflow:hidden。

【讨论】：

【解决方案2】：

将此添加到您的 CSS：

.commentname2 a {
    display: block;
    zoom: 1;
    /* all other CSS */
}

zoom: 1 可能不是必需的，但有时 IE 需要它来触发其hasLayout flag 并阻止内容被剪切或不正确地呈现。

【讨论】：

【解决方案3】：

你有 font-size: 14px;但有几个高度：14px；带有将计入高度的填充。

基本上，您需要确保字体大小与您设置的 td 高度内的其他（填充）相匹配，因此当字体不适合时，CSS 设置的垂直空间会切断章程。

这是我使用 em 而不是 px 的原因之一 - 在考虑盒子模型时，它使布局更容易（至少对我而言）。

【讨论】：

他在commentName2中将字体大小指定为11px。