A-AA+then

ปัญหานี้ไม่เกิดขึ้นบน Browser อื่นเช่น FireFox หรือ Opera ครับ มันเกิดขึ้นกับ IE อย่างเดียว ลองดูตัวอย่างโค้ดเจ้าปัญหา

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

Relate

^