องค์ประกอบย่อยความกว้างของเด็กในพาเรนต์ที่อยู่ในตำแหน่งอย่างแน่นอนบน Internet Explorer 7

ฉันมีอย่างตำแหน่งที่เด็กหลายคนมีหนึ่งซึ่งเป็นตำแหน่งที่ค่อนข้างdiv divเมื่อฉันใช้ a percentage-based widthบนเด็กdivมันจะยุบลง0 widthบน IE7 แต่ไม่ใช่ใน Firefox หรือ Safari

ถ้าฉันใช้pixel widthมันใช้งานได้ หากผู้ปกครองอยู่ในตำแหน่งที่ค่อนข้างกว้างร้อยละบนเด็กทำงาน

1. มีบางอย่างที่ฉันหายไปไหม
2. มีวิธีแก้ไขที่ง่ายกว่านี้สำหรับpixel-based widthเด็ก ๆ ไหม?
3. มีพื้นที่ของข้อกำหนด CSS ที่ครอบคลุมสิ่งนี้หรือไม่

พาเรนdivต์ต้องมีการกำหนดไว้widthไม่ว่าจะเป็นพิกเซลหรือเป็นเปอร์เซ็นต์ ใน Internet Explorer 7 ผู้ปกครองdivจำเป็นต้องมีการกำหนดwidthเปอร์เซ็นต์เด็กdivที่จะทำงานอย่างถูกต้อง

นี่คือตัวอย่างรหัส ฉันคิดว่านี่คือสิ่งที่คุณกำลังมองหา ข้อมูลต่อไปนี้จะแสดงเหมือนกันทุกประการใน Firefox 3 (mac) และ IE7

#absdiv {
  position: absolute; 
  left: 100px; 
  top: 100px; 
  width: 80%; 
  height: 60%; 
  background: #999;
}

#pctchild {
  width: 60%; 
  height: 40%; 
  background: #CCC;
}

#reldiv {
  position: relative;
  left: 20px;
  top: 20px;
  height: 25px;
  width: 40%;
  background: red;
}

<div id="absdiv">
    <div id="reldiv"></div>
    <div id="pctchild"></div>
</div>

IE ก่อนหน้า 8 มีลักษณะชั่วคราวของกล่องรุ่นที่สะดุดตาที่สุดสร้างปัญหากับความกว้างตามเปอร์เซ็นต์ ในกรณีของคุณที่นี่ตำแหน่งที่แน่นอนdivโดยค่าเริ่มต้นไม่มีความกว้าง ความกว้างของมันจะได้ผลตามความกว้างของพิกเซลของเนื้อหาและจะถูกคำนวณหลังจากแสดงเนื้อหาแล้ว ดังนั้นเมื่อถึงจุดนี้ IE จะพบและแสดงตำแหน่งที่divผู้ปกครองของคุณมีความกว้างเป็น 0 ดังนั้นจึงยุบลงเป็น 0

หากคุณต้องการการอภิปรายในเชิงลึกมากกว่านี้พร้อมกับจำนวนมากตัวอย่างการทำงานมีห่านตัวผู้ที่นี่

เหตุใดเปอร์เซ็นต์ความกว้างของเด็กในพาเรนต์ที่อยู่ในตำแหน่งที่แน่นอนทำงานใน IE7

เพราะมันคือ Internet Explorer

มีบางอย่างที่ฉันหายไปไหม

นั่นคือเพื่อเพิ่มการรับรู้ของเพื่อนร่วมงาน / ลูกค้าของคุณที่ IE แย่

มีการแก้ไขที่ง่ายนอกเหนือจากความกว้างของพิกเซลบนลูกหรือไม่?

ใช้emหน่วยที่มีประโยชน์มากกว่าเมื่อสร้างเลย์เอาต์ของเหลวที่คุณสามารถใช้ในการเสริมและระยะห่างรวมถึงขนาดตัวอักษร ดังนั้นพื้นที่สีขาวของคุณจะขยายและย่อขนาดตามข้อความของคุณหากมีการปรับขนาด (ซึ่งเป็นสิ่งที่คุณต้องการจริงๆ) ฉันไม่คิดว่าเปอร์เซ็นต์จะให้การควบคุมที่ดีกว่า ems; ไม่มีอะไรที่จะหยุดคุณระบุเป็นร้อยใน EMS (0.01 em) และเบราว์เซอร์จะตีความตามที่เห็นสมควร

มีพื้นที่ของข้อกำหนด CSS ที่ครอบคลุมสิ่งนี้หรือไม่

ไม่มีเท่าที่ฉันจำได้ว่าem% s และมีไว้สำหรับแบบอักษรขนาดเดียวที่ CSS 1.0

ฉันคิดว่าสิ่งนี้เกี่ยวข้องกับวิธีการนำhasLayoutทรัพย์สินไปใช้ในเบราว์เซอร์รุ่นเก่า

คุณลองใช้รหัสใน IE8 เพื่อดูว่าใช้งานได้หรือไม่ IE8 มี Debugger ( F12) และสามารถทำงานในโหมด IE7 ได้

divความต้องการที่จะมีความกว้างที่กำหนด:

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>