ตัวแปร PHP ในตาราง HTML แสดงผลได้ดีใน Chrome, Firefox และ Safari แต่แสดงได้ไม่ดีใน IE 8

ตารางด้านล่างนี้แสดงผลได้ดีใน Chrome, Firefox และ Safari ส่วนด้านซ้ายจะแสดงดังนี้:

ป้อนคำอธิบายรูปภาพที่นี่

อย่างไรก็ตาม ใน Internet Explorer 8 บางครั้งด้านซ้ายจะแสดงดังนี้:ป้อนคำอธิบายรูปภาพที่นี่

ใน IE8 ที่มีความคิดเห็นสั้นๆ จะแสดงเฉพาะส่วนบนของตัวแปร $row["username"] ซึ่งก็คือ "ผู้ดูแลระบบ" ในภาพหน้าจอเท่านั้น ฉันจะทำให้ IE8 แสดงผลเต็ม $row["username"] ในสถานการณ์เช่นนี้ได้อย่างไร

ขอบคุณล่วงหน้า,

จอห์น

รหัสที่มา:

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>";

ซีเอสเอส:

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 แหล่งที่มา

คำตอบ (3)


arrow_upward
2
arrow_downward

คุณขอให้ลิงก์สูงขนาดนั้นเท่านั้น:

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

เคล็ดลับคือ สิ่งนี้ไม่ควรได้ผล และใช้ไม่ได้กับเบราว์เซอร์ส่วนใหญ่: ตามมาตรฐาน CSS นั้น height ใช้ไม่ได้กับองค์ประกอบในบรรทัด เช่น <a> อย่างชัดเจน อย่างไรก็ตาม ใน Quirks Mode ของ IE ก็ยังคงเป็นเช่นนั้น ดังนั้น:

  • ลบคุณสมบัติ height: ที่ไม่มีประสิทธิภาพออก
  • ตรวจสอบให้แน่ใจว่าคุณให้บริการเพจของคุณด้วยการประกาศ DOCTYPE ในโหมดมาตรฐาน คุณไม่ต้องการโหมด Quirks ที่เต็มไปด้วยข้อบกพร่องความเข้ากันได้แบบเดิมที่น่ารังเกียจเช่นนี้

นอกจากนี้ อย่าลืมใช้ htmlspecialchars() เมื่อสร้างเทมเพลตสตริงข้อมูลเป็น HTML ไม่เช่นนั้นคุณจะมีช่องโหว่ในการเขียนสคริปต์ข้ามไซต์ stripslashes() ไม่ได้ทำงานนี้และเกือบจะเป็นความผิดพลาดอย่างแน่นอน

person bobince    schedule 07.06.2011
comment
อ่าโอเค. ฉันจะลองดู เท่าที่ htmlspecialchars() ดำเนินไป คุณจะบันทึกเพื่อความปลอดภัยที่ฉันควรใส่ไว้กับตัวแปร PHP ทั้งหมดหรือไม่ - person John; 08.06.2011
comment
ใช่. ทุกที่ที่คุณนำสตริงข้อความธรรมดามาวางลงใน HTML คุณจะต้องเข้ารหัสเพื่อให้เหมาะกับบริบทนั้น ไม่ใช่แค่เรื่องความปลอดภัยเท่านั้น ความปลอดภัยเป็นกรณีพิเศษของความถูกต้อง โดยทั่วไปสัญลักษณ์อินพุต < ควรมีลักษณะเหมือนเครื่องหมายน้อยกว่าบนหน้าเว็บ (ซึ่งมาร์กอัปต้องเป็น &lt;) และไม่ใช่แท็ก HTML โดยไม่ได้ตั้งใจ - person bobince; 09.06.2011

arrow_upward
0
arrow_downward

ดูเหมือนว่าปัญหาเรื่องความสูงของเส้น ลองใส่พิกเซลจริง/ตั้งค่าบน line-height สำหรับ .commentname2user และ .commentname1

person locrizak    schedule 07.06.2011

arrow_upward
0
arrow_downward

ฉันได้ทำการจัดเตรียมโค้ด php และ css ของคุณแล้ว แต่นี่จะดูค่อนข้างเหมือนกันในเบราว์เซอร์ทั้งสอง หวังว่านี่จะช่วยได้

รหัส 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>";

และ CSS ของคุณ:

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