Elemen pemosisian absolut lebarnya 100% di dalam bug penampung yang diposisikan relatif di webkit

Saya telah menggunakan sedikit trik penentuan posisi ini untuk mencapai hasil yang kompleks. Saya rasa saya menemukan bug di browser webkit yang sulit saya pahami.

Berikut markup sederhananya:

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

Untuk melihat cara kerjanya, buka http://jsfiddle.net/JFxqt/14/ ini di krom.

Rentang yang ditampilkan benar-benar diposisikan di dalam wadah relatif. Karena tabel menggunakan tata letak tetap, semua selnya memiliki lebar tetap, oleh karena itu anak harus dapat menggunakan persentase lebar. Tabel memiliki 7 kolom sedangkan lebar bentang diatur ke 600% (yaitu 6 kolom * 100%). Gagal mencakup semua 6 kolom di browser webkit. Firefox dan IE ditampilkan sepenuhnya di semua kolom yang ditentukan.

Idealnya mengatur lebar rentang menjadi 100% harus dirender pada 1 kolom, 200% pada 2 kolom, dan seterusnya.

Adakah yang punya ide atau solusi?


google-chrome css absolute width webkit
person user2307131    schedule 22.04.2013    source sumber
comment
Sepertinya Anda sedang membuat kerangka CSS, jadi apakah benar asumsi saya bahwa Anda akan memiliki gaya seperti .cols-1, .cols-2 ... .cols-10 dan seterusnya?   -  person Marc Audet    schedule 22.04.2013

Jawaban (3)


arrow_upward
0
arrow_downward

Coba ini: http://jsfiddle.net/JFxqt/4/

Saya mengubah ini di CSS Anda:

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
Terima kasih atas tanggapan cepatnya, meskipun tidak persis seperti yang saya cari. Ada 7 kolom dalam tabel, rentangnya dimaksudkan untuk mencakup 6 kolom saja. Ini berarti pengganti khusus untuk digunakan sebagai pengganti colspan. Dengan kata lain menyetelnya ke 400% sama dengan menyetel colspan 4. - person user2307131; 22.04.2013
comment
Ini dia, itu hanya mencakup 6 dari 7 kotak. Anda hanya perlu mengubah lebarnya sesuai kebutuhan - person Andrew; 22.04.2013
comment
Sekali lagi terima kasih atas tanggapannya, tetapi solusi Anda memerlukan pengetahuan tentang jumlah kolom yang ditentukan dalam markup. Saya mencoba mendapatkan solusi yang berfungsi untuk jumlah kolom yang berubah-ubah terlepas dari posisi dalam halaman. yaitu solusinya harus bekerja sama baiknya dengan jsfiddle.net/JFxqt/6 - person user2307131; 22.04.2013
comment
Anda perlu mencoba beberapa jquery untuk melakukan perhitungan semacam itu - person Andrew; 22.04.2013
comment
Itu masalahnya, saya mencoba mencari solusi non javascript. CSS yang saya posting seharusnya berfungsi (berfungsi di semua browser non webkit), hanya ingin tahu apakah ada sesuatu yang saya lewatkan agar webkit dapat bermain bola atau apakah itu bug yang melekat pada mesin rendering webkit? - person user2307131; 22.04.2013
comment
Saya pikir masalahnya adalah ia tidak menyukai apa yang Anda coba lakukan. Jadi, Anda mungkin perlu mencoba solusi baru - person Andrew; 22.04.2013

arrow_upward
0
arrow_downward

Anda melihat masalah lintas-browser terkait dengan cara lebar sel tabel dihitung dan diwariskan. Ini bisa berupa bug atau sesuatu yang tidak ditentukan secara eksplisit oleh spesifikasi CSS dan diserahkan kepada browser untuk memutuskan.

Di Firefox, lebar <td> diwarisi oleh <div> sedangkan di browser webkit (Chrome), lebar yang diwarisi oleh anak <div> lebih kecil 1px.

Saat Anda mengalikan dengan 100% dan 200%, Anda tidak akan melihat efeknya, namun saat Anda mencapai sel terakhir pada 700%, Anda melihat jarak sekitar 7 piksel.

Jika Anda sedang membangun kerangka CSS, Anda perlu membuat gaya untuk browser Firefox dan gaya lainnya untuk browser webkit.

Untuk kasus 6 kolom, saya menemukan yang berikut ini akan berfungsi:

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

Saya menambahkan batas kanan yaitu 600% x 1px = 6px dan kemudian memposisikan rentang ke kiri sebesar -1px. Untuk jumlah kolom lainnya, misalnya .cols-3, Anda memerlukan width: 300% dan border-right: 3px solid #ccc dan seterusnya.

Anda mungkin perlu menggunakan beberapa jenis filter CSS atau peretasan pemilih. Saya menemukan referensi berikut: http://browserhacks.com

Sayangnya, tidak ada solusi yang bersih atau elegan untuk masalah ini.

person Marc Audet    schedule 22.04.2013
comment
Saya telah melihat fungsi calc tetapi belum mencobanya. Ini mungkin belum didukung dengan baik. Apakah Anda benar-benar membutuhkan tabel? Masalahnya adalah cara browser menghitung lebar sel tabel... sulit untuk mengatasi hal ini. - person Marc Audet; 22.04.2013
comment
Itulah tepatnya yang kupikirkan Marc meski tampaknya lebih menyebalkan dari itu. Anda dapat menggunakan fungsi kalk css3 baru untuk melakukan sesuatu seperti ini jsfiddle.net/JFxqt/10. Namun, hal itu pun masih belum membuahkan hasil yang diinginkan. Saat Anda mengubah ukuran jendela Anda. Perhatikan bilah apakah Anda mengubah ukuran browser/wadah Anda di jsfiddle. - person user2307131; 22.04.2013
comment
Saya mengerti apa yang kamu maksud. Bisakah Anda memberi tahu saya bagaimana bilah abu-abu akan digunakan? jenis konten apa yang akan dikandungnya? Perilaku fleksibilitas/cair/responsif seperti apa yang Anda perlukan? - person Marc Audet; 22.04.2013
comment
Ya sayangnya, masalah yang sama terjadi saat membangun solusi berbasis div yang lebih kompleks dan menggunakan display:table display:table-cell dll. Namun saya mungkin kurang beruntung, tidak dapat memikirkan solusi apa pun yang tampaknya berfungsi untuk webkit. - person user2307131; 22.04.2013
comment
Mengapa bilah abu-abu harus disematkan di dalam tabel? - person Marc Audet; 22.04.2013
comment
Ini merupakan upaya untuk membangun implementasi rowpan/colspan khusus yang memungkinkan widget kalender dirender secara alami inline (sel tunggal) atau dipratinjau sebagai acara multi-kolom (tanpa menggunakan perubahan javascript atau markup) - person user2307131; 23.04.2013
comment
Saya kira Anda mencoba menghindari melakukan sesuatu seperti <td colspan=6>? - person Marc Audet; 23.04.2013
comment
Tepatnya, jika kita benar-benar menggunakan colspans dan rowpans yang tepat, kita harus merender dua set markup (satu datar & satu lagi dikelompokkan). - person user2307131; 23.04.2013

arrow_upward
0
arrow_downward

Setelah satu atau dua hari mencari solusi, tampaknya peningkatan JS bersyarat untuk browser Webkit adalah satu-satunya solusi yang layak.

Masalahnya berasal dari perhitungan persentase lebar Webkit (dan mesin rendering lama Opera), yang selalu dibulatkan ke bawah ke piksel terdekat dibandingkan disimpan dalam bentuk ganda. Oleh karena itu di Webkit, perbedaan 1px dapat ditambahkan untuk setiap faktor 100% (misalnya 2300% - 100% * 23 - akan memiliki perbedaan maksimum 23px), sedangkan Firefox dan versi IE yang lebih baru hanya dapat memiliki perbedaan maksimum keseluruhan 1px .

John Resig menyinggung masalah ini beberapa waktu lalu, http://ejohn.org/blog/sub-pixel-problems-in-css/

person user2307131    schedule 24.04.2013