องค์ประกอบการวางตำแหน่งที่แน่นอนมีความกว้าง 100% ภายในข้อบกพร่องของคอนเทนเนอร์ที่มีตำแหน่งสัมพันธ์กันใน webkit

ฉันใช้เคล็ดลับการวางตำแหน่งนี้เล็กน้อยเพื่อให้ได้ผลลัพธ์ที่ซับซ้อน ฉันคิดว่าฉันเจอจุดบกพร่องในเบราว์เซอร์ webkit ซึ่งฉันพยายามทำความเข้าใจ

นี่คือมาร์กอัปง่ายๆ:

<table>
<tbody>
    <tr>
        <td>
        <div>
            <span class="cols-6"></span>
        </div></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tbody>

and CSS:

*, *:after, *:before {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
tr {
    border: 1px solid #ddd;
}
td {
    vertical-align: top;
    padding: 0;
    height: 100px;
    border: solid #ddd;
    border-width: 1px 0 0 0;
    box-shadow: -1px 0px #ddd;
}
td div {
    position: relative;
}
td div span.cols-6 {
    position: absolute;
    width: 600%;
    height: 20px;
    background: #ccc;
}

หากต้องการดูการดำเนินการนี้ ให้เปิด http://jsfiddle.net/JFxqt/14/ ใน โครเมียม.

ช่วงที่แสดงอยู่ในตำแหน่งที่แน่นอนภายในคอนเทนเนอร์แบบสัมพันธ์ เนื่องจากตารางใช้เค้าโครงคงที่ เซลล์ทั้งหมดจึงมีความกว้างคงที่ ดังนั้น เด็กจึงควรใช้ความกว้างเป็นเปอร์เซ็นต์ได้ ตารางมี 7 คอลัมน์ ในขณะที่ความกว้างของช่วงตั้งไว้ที่ 600% (เช่น 6 คอลัมน์ * 100%) ไม่สามารถครอบคลุมทั้ง 6 คอลัมน์ในเบราว์เซอร์ webkit Firefox และ IE แสดงผลอย่างครบถ้วนในคอลัมน์ที่ระบุทั้งหมด

ตามหลักการแล้ว การตั้งค่าความกว้างของช่วงเป็น 100% ควรแสดงผลทั่วทั้ง 1 คอลัมน์, 200% ทั่วทั้ง 2 คอลัมน์ และอื่นๆ

ใครมีความคิดหรือวิธีแก้ปัญหา?


google-chrome css absolute width webkit
person user2307131    schedule 22.04.2013    source แหล่งที่มา
comment
ดูเหมือนว่าคุณกำลังสร้างเฟรมเวิร์ก CSS ดังนั้นฉันจึงคิดถูกไหมว่าคุณจะมีสไตล์เช่น .cols-1, .cols-2 ... .cols-10 และอื่นๆ   -  person Marc Audet    schedule 22.04.2013

คำตอบ (3)


arrow_upward
0
arrow_downward

ลองสิ่งนี้: http://jsfiddle.net/JFxqt/4/

ฉันเปลี่ยนแปลงสิ่งนี้ใน CSS ของคุณ:

body{margin:0px}
td div {

}
span.cols-6 {
    position: absolute;
    width: 85.6%;
    height: 20px;
    background: #ccc;
    z-index:10;
    top:0;
    left:0;
}
person Andrew    schedule 22.04.2013
comment
ขอบคุณสำหรับการตอบกลับที่รวดเร็ว ไม่ใช่สิ่งที่ฉันต้องการอย่างแน่นอน ตารางมี 7 คอลัมน์ โดยช่วงดังกล่าวครอบคลุมเพียง 6 คอลัมน์เท่านั้น มันหมายถึงการทดแทนแบบกำหนดเองเพื่อใช้แทน colspan กล่าวอีกนัยหนึ่งการตั้งค่าเป็น 400% จะคล้ายกับการตั้งค่า colspan เป็น 4 - person user2307131; 22.04.2013
comment
ไปแล้ว มันครอบคลุมเพียง 6 กล่องจาก 7 กล่องเท่านั้น คุณเพียงแค่ต้องเปลี่ยนความกว้างให้เหมาะกับสิ่งที่คุณต้องการ - person Andrew; 22.04.2013
comment
ขอขอบคุณอีกครั้งสำหรับการตอบกลับ แต่โซลูชันของคุณจำเป็นต้องทราบจำนวนคอลัมน์ที่ระบุในมาร์กอัป ฉันกำลังพยายามหาวิธีแก้ปัญหาที่เหมาะกับจำนวนคอลัมน์ที่ต้องการโดยไม่คำนึงถึงตำแหน่งภายในหน้า กล่าวคือ โซลูชันควรทำงานได้ดีพอๆ กันกับ jsfiddle.net/JFxqt/6 - person user2307131; 22.04.2013
comment
คุณจะต้องลองใช้ jquery ก่อนจึงจะคำนวณได้ - person Andrew; 22.04.2013
comment
นั่นคือสิ่งที่ฉันกำลังพยายามหาวิธีแก้ปัญหาที่ไม่ใช่จาวาสคริปต์ CSS ที่ฉันโพสต์ควรใช้งานได้ (ใช้ได้กับเบราว์เซอร์ที่ไม่ใช่ webkit ทั้งหมด) แค่สงสัยว่ามีบางอย่างที่ฉันขาดหายไปในการทำให้ webkit เล่นบอลหรือว่ามันเป็นข้อบกพร่องโดยธรรมชาติกับเอ็นจิ้นการเรนเดอร์ของ webkit หรือไม่ - person user2307131; 22.04.2013
comment
ฉันคิดว่าปัญหาคือมันไม่ชอบสิ่งที่คุณพยายามทำ ดังนั้นคุณอาจต้องลองวิธีแก้ปัญหาใหม่ - person Andrew; 22.04.2013

arrow_upward
0
arrow_downward

คุณกำลังพบปัญหาข้ามเบราว์เซอร์ที่เกี่ยวข้องกับวิธีคำนวณและสืบทอดความกว้างของเซลล์ตาราง นี่อาจเป็นจุดบกพร่องหรือบางสิ่งที่ไม่ได้ระบุไว้อย่างชัดเจนตามข้อกำหนด CSS และปล่อยให้เบราว์เซอร์ตัดสินใจ

ใน Firefox ความกว้างของ <td> จะสืบทอดโดย <div> ในขณะที่เบราว์เซอร์ webkit (Chrome) ความกว้างที่สืบทอดโดยลูก <div> จะเล็กกว่า 1px

เมื่อคุณคูณด้วย 100% และ 200% คุณจะไม่เห็นผล แต่เมื่อถึงเซลล์สุดท้ายที่ 700% คุณจะเห็นช่องว่างประมาณ 7px

หากคุณกำลังสร้างเฟรมเวิร์ก CSS คุณจะต้องสร้างสไตล์สำหรับเบราว์เซอร์ Firefox และอีกสไตล์สำหรับเบราว์เซอร์ webkit

สำหรับกรณีที่มี 6 คอลัมน์ ฉันพบว่าสิ่งต่อไปนี้ใช้ได้:

td div span.cols-6 {
    position: absolute;
    left:-1px;
    width: 600%;
    border-right: 6px solid #ccc;
    height: 20px;
    background: #ccc;
}

ฉันเพิ่มเส้นขอบด้านขวาที่ 600% x 1px = 6px จากนั้นวางตำแหน่งการขยายไปทางซ้ายด้วย -1px สำหรับคอลัมน์อื่นๆ เช่น .cols-3 คุณจะต้องใช้ width: 300% และ border-right: 3px solid #ccc ไปเรื่อยๆ

คุณอาจจำเป็นต้องใช้ตัวกรอง CSS หรือแฮ็กตัวเลือกบางประเภท ฉันพบข้อมูลอ้างอิงต่อไปนี้: http://browserhacks.com

น่าเสียดายที่ไม่มีวิธีแก้ปัญหาที่สะอาดหรือหรูหราสำหรับปัญหานี้

person Marc Audet    schedule 22.04.2013
comment
ฉันเคยเห็นฟังก์ชัน calc แล้ว แต่ยังไม่ได้ลองใช้ อาจจะยังไม่ได้รับการสนับสนุนที่ดีนัก คุณต้องการโต๊ะจริง ๆ หรือไม่? ปัญหาเกิดจากการที่เบราว์เซอร์คำนวณความกว้างของเซลล์ตาราง... แก้ไขปัญหานี้ได้ยาก - person Marc Audet; 22.04.2013
comment
นั่นคือสิ่งที่ฉันคิดว่ามาร์กแม้ว่ามันจะดูน่ารำคาญยิ่งกว่านั้นก็ตาม คุณสามารถใช้ฟังก์ชันการคำนวณ css3 ใหม่เพื่อทำสิ่งนี้ jsfiddle.net/JFxqt/10. อย่างไรก็ตามแม้จะไม่ได้ผลลัพธ์ที่ต้องการก็ตาม เมื่อคุณปรับขนาดหน้าต่างของคุณ ดูแถบที่คุณปรับขนาดเบราว์เซอร์ / คอนเทนเนอร์ของคุณบน jsfiddle - person user2307131; 22.04.2013
comment
ฉันเห็นสิ่งที่คุณหมายถึง คุณช่วยบอกฉันได้ไหมว่าแถบสีเทาจะใช้อย่างไร? จะมีเนื้อหาประเภทใด? คุณต้องการพฤติกรรมที่ยืดหยุ่น/ลื่นไหล/ตอบสนองแบบใด? - person Marc Audet; 22.04.2013
comment
ใช่น่าเสียดายที่มีปัญหาเดียวกันนี้เกิดขึ้นในการสร้างโซลูชันที่ใช้ div ที่ซับซ้อนมากขึ้นและใช้ display:table display:table-cell ฯลฯ ฉันอาจจะโชคไม่ดี แต่คิดวิธีแก้ปัญหาใด ๆ ที่ดูเหมือนจะใช้ได้กับ webkit ไม่ได้ - person user2307131; 22.04.2013
comment
ทำไมจึงต้องฝังแถบสีเทาไว้ในตาราง? - person Marc Audet; 22.04.2013
comment
เป็นความพยายามในการสร้างการใช้งาน rowspan/colspan แบบกำหนดเองที่อนุญาตให้วิดเจ็ตปฏิทินสามารถแสดงผลแบบอินไลน์ตามธรรมชาติ (เซลล์เดียว) หรือดูตัวอย่างเป็นเหตุการณ์แบบหลายคอลัมน์ (โดยไม่ต้องใช้จาวาสคริปต์หรือการเปลี่ยนแปลงมาร์กอัป) - person user2307131; 23.04.2013
comment
ฉันเดาว่าคุณกำลังพยายามหลีกเลี่ยงการทำบางอย่างเช่น <td colspan=6>? - person Marc Audet; 23.04.2013
comment
หากเราใช้ colspans และ rowspans ที่เหมาะสมจริงๆ เราจะต้องเรนเดอร์มาร์กอัปสองชุด (ชุดหนึ่งแบบเรียบและอีกชุดจัดกลุ่ม) - person user2307131; 23.04.2013

arrow_upward
0
arrow_downward

หลังจากผ่านไปหนึ่งหรือสองวันในการค้นหาวิธีแก้ไขปัญหา ดูเหมือนว่าการปรับปรุง JS แบบมีเงื่อนไขสำหรับเบราว์เซอร์ Webkit เป็นเพียงวิธีแก้ปัญหาเดียวเท่านั้น

ปัญหาเกิดจากการคำนวณเปอร์เซ็นต์ความกว้างของ Webkits (และเอ็นจิ้นการเรนเดอร์เก่าของ Opera) ซึ่งจะถูกปัดเศษลงเป็นพิกเซลที่ใกล้ที่สุดเสมอ แทนที่จะจัดเก็บเป็นสองเท่า ดังนั้นใน Webkit อาจมีการเพิ่มความคลาดเคลื่อน 1px สำหรับทุกปัจจัย 100% (เช่น 2300% - 100% * 23 - จะมีความคลาดเคลื่อนสูงสุด 23px) ในขณะที่ Firefox และ IE เวอร์ชันใหม่กว่าสามารถมีความคลาดเคลื่อนโดยรวมสูงสุดได้เพียง 1px เท่านั้น .

John Resig ได้กล่าวถึงปัญหานี้เมื่อไม่นานมานี้ http://ejohn.org/blog/sub-pixel-problems-in-css/

person user2307131    schedule 24.04.2013