Variabel PHP dalam tabel HTML ditampilkan dengan baik di Chrome, Firefox, dan Safari, tetapi buruk di IE 8

Tabel di bawah ini sangat cocok digunakan di Chrome, Firefox, dan Safari. Bagian kirinya ditampilkan seperti ini:

masukkan deskripsi gambar di sini

Namun, di Internet Explorer 8, bagian kiri terkadang ditampilkan seperti ini:masukkan deskripsi gambar di sini

Di IE8, dengan komentar singkat, hanya bagian atas variabel $row["username"], yaitu "admin" di tangkapan layar, yang ditampilkan. Bagaimana saya bisa membuatnya sehingga IE8 akan menampilkan $row["username"] penuh dalam situasi seperti ini?

Terima kasih sebelumnya,

Yohanes

Kode sumber:

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 style="border-left:2px solid #004993; border-bottom:2px solid #004993; border-top:2px solid #004993;" rowspan="3" class="commentnamecount">'.$count++.'</td>';
    echo '<td style="background: #CAE1FF; border-top:2px solid #004993;" class="commentname2user"><a href="http://www...com/.../index.php?profile='.$row["username"].'">'.$row["username"].'</a></td>';
    echo '<td style="border-right:2px solid #004993; border-bottom:2px solid #004993; border-top:2px solid #004993;" rowspan="3" class="commentname1" id="comment-' . $row["commentid"] . '">'.stripslashes($row["comment"]).'</td>';
    echo '</tr>';
    echo '<tr>';
    echo '<td style="background: #CAE1FF;" class="commentname2">'.$dt1->format('F j, Y').'</td>';
    echo '</tr>';
    echo '<tr>';
    echo '<td style="background: #CAE1FF; border-bottom:2px solid #004993;" class="commentname2a">'.$dt1->format('g:i a').'</td>';
    echo '</tr>';
    echo '<tr>';
    echo '<td class="commentname2a"></td>';
    echo '</tr>';
    }
echo "</table>";

CSSnya:

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

}

table.commentecho td {
   border: 0px solid #fff;  
   text-align: left; 
   height: 20px;


}

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

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

.commentnamecount { width: 50px;
            font-family:Arial, Helvetica, sans-serif;
            font-size: 25px;   
            overflow:hidden !important;
            color: #004993;
            font-weight: bold;
            display:table-cell;   
            vertical-align: top;
            padding-bottom: 0px;
            padding-left: 5px;
            padding-top: 2px;

}


.commentname2user { width: 120px;
            color: #000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size: 14px;
            font-weight: normal;
            height: 50px;
            padding-top:5px;
            padding-left: 5px;
            padding-bottom: 10px;
            vertical-align: top;

}

.commentname1 { 
            line-height: 170%;
            width: 410px;
            font-family: Georgia, "Times New Roman", Times, serif;
            overflow:hidden !important;
            color: #000000;
            padding-bottom: 30px;
            padding-left: 10px;
            vertical-align: top;
}


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

}

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

}

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

}

.commentname2a { width: 160px;
            overflow:hidden !important;
            color: #000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size: 11px;
            font-weight: normal;
            height: 40px;
            padding-top:0px;
            padding-left: 5px;
            padding-bottom: 30px;
            vertical-align: top;

}

html css internet-explorer cross-browser
person John    schedule 07.06.2011    source sumber

Jawaban (3)


arrow_upward
2
arrow_downward

Ya, Anda memang meminta tautan setinggi itu:

table.commentecho td a {
    height: 20px;
}

Triknya adalah, ini seharusnya tidak berfungsi, dan tidak berfungsi di sebagian besar browser: menurut standar CSS, height secara eksplisit tidak berlaku untuk elemen sebaris seperti <a>. Namun dalam Mode Quirks IE, ia tetap melakukannya. Jadi:

  • hapus properti height: yang tidak efektif
  • pastikan Anda menyajikan halaman Anda dengan deklarasi Mode Standar DOCTYPE. Anda tidak ingin Mode Quirks yang penuh dengan bug kompatibilitas lama yang buruk seperti ini.

Ingatlah juga untuk menggunakan htmlspecialchars() saat membuat template string data ke dalam HTML, atau Anda akan memiliki kerentanan skrip lintas situs. stripslashes() tidak melakukan pekerjaan ini dan hampir pasti merupakan kesalahan.

person bobince    schedule 07.06.2011
comment
Ah, oke. Saya akan mencobanya. Sejauh htmlspecialchars() berjalan, apakah Anda menyimpan sebagai tindakan pencegahan keamanan, saya harus meletakkannya di semua variabel PHP? - person John; 08.06.2011
comment
Ya. Di mana pun Anda mengambil string teks biasa dan memasukkannya ke dalam HTML, Anda perlu menyandikannya agar sesuai dengan konteks tersebut. Ini bukan hanya keamanan; keamanan adalah kasus khusus dari kebenaran. Simbol masukan < biasanya terlihat seperti tanda kurang dari pada laman (yang markupnya harus &lt;) dan bukan tag HTML yang tidak disengaja. - person bobince; 09.06.2011

arrow_upward
0
arrow_downward

Sepertinya masalah ketinggian garis. coba letakkan piksel sebenarnya/setel nilai pada tinggi garis untuk .commentname2user dan .commentname1

person locrizak    schedule 07.06.2011

arrow_upward
0
arrow_downward

Saya membuat beberapa pengaturan pada kode php dan css Anda tetapi ini akan terlihat hampir sama di kedua browser, semoga ini membantu...

Kode PHP:

echo '<table class="comments" cellspacing="0">';
$count = 1;
while ($row = mysql_fetch_array($result)) { 
    $dt1 = new DateTime($row["datecommented"], $tzFrom1);  
    $dt1->setTimezone($tzTo1);
    echo '<tr>';
    echo '<td class="comment-count">'.$count++.'</td>';
    echo '<td class="comment-user">';
    echo '<a href="http://www...com/.../index.php?profile='.$row["username"].'">'.$row["username"].'</a>'
    echo '<br/><span class="comment-date">'.$dt1->format('F j, Y').'</span><br/>';
    echo '<span class="comment-hour">'.$dt1->format('F j, Y').'</span>';
    echo '</td>';
    echo '<td class="comment-text" id="comment-' . $row["commentid"] . '">'.stripslashes($row["comment"]).'</td>';
    echo '</tr>';
    }
echo "</table>";

Dan CSS Anda:

table.comments{
    margin: 20px 0 30px;
    width: 450px;
}
table.comments td{
    vertical-align:top;
    border: solid #004993;
    border-width:2px 0 2px 0;
}
table.comments td.comment-count{
    border-left: 2px solid #004993;
    width: 50px;
    font:bold 25px Arial, Helvetica, sans-serif;
    color: #004993;
    vertical-align: top;
    padding:2px 0 0 5px;
}
table.comments td.comment-user{width:120px;background-color:#CAE1FF;padding: 5px;}
table.comments td.comment-user a{
    font:bold 14px/20px Arial, Helvetica, sans-serif; 
    text-decoration:none;
    color: #004284;
    padding:2px;
}
table.comments td.comment-user a:hover{background-color: #004284; color:#CAE1FF;}
table.comments td.comment-user span.comment-date, span.comment-hour{
    font:11px Arial, Helvetica, sans-serif;
}
table.comments td.comment-text{
    border-right: 2px solid #004993;
    width: 410px;
    font: normal 14px/20px Georgia, "Times New Roman", Times, serif;
    padding-left: 10px;
}
person Grekz    schedule 08.06.2011