เมื่อ IE คืนค่า offsetWidth ของ table เป็น 0
ปัญหานี้ไม่เกิดขึ้นบน Browser อื่นเช่น FireFox หรือ Opera ครับ มันเกิดขึ้นกับ IE อย่างเดียว ลองดูตัวอย่างโค้ดเจ้าปัญหา
ในกรณีนี้มีปัญหาที่อาจเกิดขึ้นได้ 2 กรณี คือ
1. อ่านค่า offsetWidth ของ table แล้วคืนค่าเป็น 0
2. อ่านค่า offsetWidth ของ table แล้วคืนค่าเป็น ความกว้างของ รูป เนื่องจากมีรูปอยู่ภายใน แล้วรูปมีขนาดใหญ่กว่าที่กำหนด ทำให้ตารางขยายขนาดออก เลยคืนค่าความกว้างเป็นค่าใหม่ของรูป
ทั้ง 2 กรณี หากจำเป็นต้องนำความกว้างของตารางไปคำนวณ เช่น การคำนวณ เพื่อปรับขนาดรูปให้กลับมามีขนาดตามที่กำหนดโดยตาราง บน IE ก็จะทำไม่ได้ เนื่องจากค่าที่ถูกต้องที่ต้องการคือ 100px แต่ค่าที่คืนกลับมาไม่ได้เป็นดังที่ต้องการ
การแก้ปัญหานี้ สามารถทำได้ง่ายๆ โดยการสร้างตารางใส่ลงใน div ครับ แล้วกำหนดค่าคงที่ ที่ div แทน และไปอ่านค่าที่ div แทน table
<style type="text/css">
#table-main {
width:100px;
}
</style>
<body>
<table id="table-main">
<tr><td><img src="xx.jpg" width="200" height="200" alt="" /></td></tr>
</table>
</body>
<script type="text/javascript">
alert( document.getElementById( 'table-main' ).offsetWidth );
</script>ในกรณีนี้มีปัญหาที่อาจเกิดขึ้นได้ 2 กรณี คือ
1. อ่านค่า offsetWidth ของ table แล้วคืนค่าเป็น 0
2. อ่านค่า offsetWidth ของ table แล้วคืนค่าเป็น ความกว้างของ รูป เนื่องจากมีรูปอยู่ภายใน แล้วรูปมีขนาดใหญ่กว่าที่กำหนด ทำให้ตารางขยายขนาดออก เลยคืนค่าความกว้างเป็นค่าใหม่ของรูป
ทั้ง 2 กรณี หากจำเป็นต้องนำความกว้างของตารางไปคำนวณ เช่น การคำนวณ เพื่อปรับขนาดรูปให้กลับมามีขนาดตามที่กำหนดโดยตาราง บน IE ก็จะทำไม่ได้ เนื่องจากค่าที่ถูกต้องที่ต้องการคือ 100px แต่ค่าที่คืนกลับมาไม่ได้เป็นดังที่ต้องการ
การแก้ปัญหานี้ สามารถทำได้ง่ายๆ โดยการสร้างตารางใส่ลงใน div ครับ แล้วกำหนดค่าคงที่ ที่ div แทน และไปอ่านค่าที่ div แทน table
<style type="text/css">
#table-warper {
width:100px;
}
#table-main {
width:100%;
}
</style>
<body>
<div id="table-warper">
<table id="table-main">
<tr><td><img src="xx.jpg" width="200" height="200" alt="" /></td></tr>
</table>
</div>
</body>
<script type="text/javascript">
alert( document.getElementById( 'table-warper' ).offsetWidth );
</script>