Имя автора комментария хорошо отображается в Chrome, но наполовину пустое в IE 8 - PullRequest
Новая
       12

Имя автора комментария хорошо отображается в Chrome, но наполовину пустое в IE 8

0 голосов
/ 31 июля 2010

В приведенном ниже коде $row["username"] является автором комментария. Он хорошо отрисовывается в Chrome, но в IE 8 отображается только верхняя его часть. Любая идея, как сделать так, чтобы все это появилось в IE 8?

Заранее спасибо,

John

код: 

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;

}

Ответы [ 3 ]

1 голос
/ 31 июля 2010

Вы указываете, что TD имеют высоту 14px, а переполнение скрыто, но класс commentname2 имеет высоту 20px.

IE скрывает 6 пикселей по этой причине. Если дочерний элемент будет иметь размер 20 пикселей, сделайте контейнер не менее 20 пикселей или, по крайней мере, удалите overflow:hidden.

1 голос
/ 31 июля 2010

Добавьте это к своему CSS: 

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

Увеличение: 1 может быть необязательным, но иногда IE нужно, чтобы оно активировало свой флаг hasLayout и предотвращало неправильную обрезку или визуализацию содержимого.

0 голосов
/ 31 июля 2010

У вас размер шрифта: 14px; но имеют несколько высоту: 14px; с подкладкой, которая будет рассчитывать на высоту.

По сути, вам нужно убедиться, что размер шрифта будет соответствовать другому (отступ) в пределах высоты td, которую вы установили, таким образом, вертикальное пространство, установленное вашим CSS, обрезает хартии, когда шрифт не подходит.

Это одна из причин, по которой я использую em вместо px - это упрощает макет (по крайней мере, мне) при рассмотрении блочной модели.

...