Menyelesaikan Isu daripada Perubahan Tidak Dijangka kepada `jenis bekas: saiz sebaris` dalam Chrome-tutorial css-php.cn

Menyelesaikan Isu daripada Perubahan Tidak Dijangka kepada `jenis bekas: saiz sebaris` dalam Chrome

Patricia Arquette

Lepaskan： 2024-10-03 16:09:02

asal

601 orang telah melayarinya

Chrome 129 memperkenalkan perubahan dalam gelagat pertanyaan kontena yang mempengaruhi elemen dengan jenis kontena: saiz sebaris. Perubahan ini, walaupun kecil, berpotensi untuk memecahkan reka letak apl web anda. Saya akan membincangkan perkara yang berubah, cara ia bertindak sebelum ini dan cara ia bertindak bermula dengan Chrome 129.

Apa yang Berubah?

Sebelum Chrome 129, jenis bekas: saiz sebaris secara tersirat:

Mencipta blok yang mengandungi untuk elemen yang diletakkan secara mutlak
Menubuhkan konteks tindanan baharu

Untuk menggambarkan ini, pertimbangkan perkara berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .container {
        container-type: inline-size;
        width: 300px;
        height: 300px;
        border: 2px solid black;
        padding: 1rem;
        margin: 2rem;
        contain: layout;
      }

      .child,
      .sibling {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
      }

      .child {
        width: 200px;
        height: 200px;
      }

      .child-1 {
        background-color: rgba(255, 0, 0, 0.7);
        top: 100px;
        left: 100px;
        z-index: 2;
      }

      .child-2 {
        background-color: rgba(0, 255, 0, 0.7);
        top: 30px;
        left: 0;
        z-index: 1;
      }

      .sibling {
        width: 150px;
        height: 150px;
        background-color: rgba(0, 0, 255, 0.7);
        top: 165px;
        left: 50px;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="child child-1">Child 1 (z-index: 2)</div>
      <div class="child child-2">Child 2 (z-index: 1)</div>
    </div>
    <div class="sibling">Sibling (z-index: 1)</div>
  </body>
</html>

Salin selepas log masuk

Sebelum Chrome 129, kod di atas dipaparkan seperti berikut:

Resolving Issues from Unexpected Changes to `container-type: inline-size` in Chrome

Kanak-kanak .container div bergaris hitam berada pada kedudukan mutlak. child-2 (div hijau) diletakkan di kiri: 0, namun ia sejajar dengan sempadan sebelah kiri div induk .container. Ini kerana dalam Chrome 128 dan lebih lama, jenis bekas: saiz sebaris secara tersirat mencipta blok yang mengandungi untuk kanak-kanak yang diletakkan secara mutlak.

Selain itu, elemen saiz sebaris jenis bekas: secara tersirat mencipta konteks tindanan baharu, menghasilkan warna hijau di bahagian bawah, merah di tengah dan biru di atas.

Walau bagaimanapun, pada Chrome 129, HTML dan CSS yang sama dipaparkan seperti itu,

Resolving Issues from Unexpected Changes to `container-type: inline-size` in Chrome

Tiada blok mengandungi dibuat untuk anak-anak elemen .container, dan oleh itu elemen yang diposisikan secara mutlak diposisikan secara relatif kepada halaman web dan bukannya relatif kepada bekasnya. Ini menyebabkan petak hijau terlepas sepenuhnya dari bekas dan menyentuh sebelah kiri halaman web.

Selain itu, memandangkan tiada konteks tindanan baharu dibuat, susunan susunan anak-anak dan adik-beradik telah berubah. Petak hijau masih di bahagian bawah, tetapi kini petak biru di tengah, dan petak merah di atas.

Mengapa Perubahan?

Menurut pasukan Chromium pada penjejak pepijat Chromium rasmi, ini adalah perubahan yang disengajakan untuk membetulkan perkara yang dianggap oleh pasukan sebagai kesilapan reka bentuk dalam spesifikasi asal.

Spesifikasi itu sendiri masih belum dikemas kini, tetapi pasukan membuat perubahan dalam tingkah laku penyemak imbas sebelum sebarang perubahan dibuat dalam spesifikasi disebabkan persetujuan dalam kumpulan kerja.

Setakat artikel ini ditulis (3 Oktober 2024), semua penyemak imbas utama lain (Firefox, Safari) masih mengikuti gelagat pra-Chrome 129.

Mengurangkan Perubahan

Jika anda hanya mahu memulihkan perkara kepada keadaan pra-Chrome 129 (dan dalam pada itu mengekalkan konsistensi merentas penyemak imbas sehingga kemas kini Firefox dan Safari untuk mengikuti pelaksanaan Chrome), anda hanya boleh menambah mengandungi: reka letak; kepada elemen yang mempunyai jenis bekas: saiz sebaris;.

Jika anda ingin menambah gelagat blok yang mengandungi tetapi tidak mencipta konteks tindanan baharu, anda boleh menambah kedudukan: relatif kepada jenis bekas: saiz sebaris; elemen, yang akan mencipta blok mengandungi untuk elemen kanak-kanak tetapi tidak mencipta konteks tindanan baharu. Walau bagaimanapun, ini akan mengakibatkan tingkah laku berbeza dalam penyemak imbas yang berbeza sehingga ke tahap penyemak imbas lain mengemas kini untuk mengikut petunjuk Chrome.

Cubalah Sendiri

Di bawah ialah CodePen yang boleh anda mainkan yang menunjukkan perkara yang saya perkatakan di atas. Jika anda mengalih keluar mengandungi: reka letak daripada gaya .container dan jika anda menggunakan Chrome 129 atau lebih baru, reka letak akan ditunjukkan seperti yang ditunjukkan dalam imej kedua yang saya berikan di atas. Walau bagaimanapun, jika anda melihat CodePen dalam Firefox 131 (terkini seperti yang ditulis), ia harus memaparkan perkara yang sama tanpa mengira sama ada mengandungi: susun atur ditetapkan atau tidak.

Saya tidak dapat mencari sebutan tentang perubahan ini dalam nota keluaran untuk Chrome 129, dan seperti yang telah disebutkan perubahan ini dibuat lebih awal daripada sebarang perubahan spesifikasi, jadi ia benar-benar mengejutkan kami dan memecahkan reka letak pada salah satu aplikasi web kami. Saya berharap maklumat ini dapat membantu sesiapa sahaja yang mempunyai masalah yang sama.

Atas ialah kandungan terperinci Menyelesaikan Isu daripada Perubahan Tidak Dijangka kepada `jenis bekas: saiz sebaris` dalam Chrome. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!