Bagaimana cara menghilangkan elemen offset menggunakan CSS?

Saya punya masalah pemosisian dengan beberapa elemen, setelah memeriksanya alat Pengembang IE8 itu menunjukkan kepada saya ini:

Sekarang saya cukup yakin masalah saya adalah 12 offset itu, tetapi bagaimana cara menghapusnya ? Saya tidak dapat menemukan penyebutan properti CSS offset. Apakah kita membutuhkan Offset selain margin?

Berikut adalah kode yang menghasilkan ini:

 <div id="wahoo" style="border: solid 1px black; height:100px;">

    <asp:TextBox ID="inputBox" runat="server" />

    <input id="btnDropDown" type="button" style="width:26px; height:26px; background-position: center center; border-left-color: buttonface; background-image: url(Images/WebResource.gif); border-bottom-color: buttonface; border-top-color: buttonface; background-repeat: no-repeat; border-right-color: buttonface;"  tabindex="99" />

    <div id="ListboxWrapper" style="display:none; position:absolute; onfocusout="this.style.display = 'none'"">
       <asp:ListBox ID="lstBoxCompany" runat="server" AutoPostBack="True" OnSelectedIndexChanged="lstBoxCompany_SelectedIndexChanged" style="z-index: 100;" Width="300px" />               
    </div>

</div>

Elemen dengan offset adalah inputBox

Offset itu pada dasarnya adalah posisi x, y yang telah dihitung browser untuk elemen berdasarkan atribut css posisinya. Jadi jika Anda meletakkan <br>sebelum itu atau elemen lain, itu akan mengubah offset. Misalnya, Anda dapat menyetelnya menjadi 0 dengan:

#inputBox{position:absolute;top:0px;left:0px;}

atau

#inputBox{position:relative;top:-12px;left:-2px;}

Oleh karena itu, masalah pemosisian apa pun yang Anda miliki, belum tentu merupakan masalah dengan offset, meskipun Anda selalu dapat memperbaikinya dengan memainkan atribut atas, kiri, kanan, dan bawah.

Apakah masalah Anda tidak kompatibel dengan browser?

Bagi saya, itu vertical-align: baselinevs vertical-align: topyang menyebabkan offset teratas.

Cobalah untuk mengatur vertical-align: top

Perbaikan cepat:

position: relative;
top: -12px;
left: -2px;

ini harus menyeimbangkan offset tersebut, tetapi mungkin Anda harus melihat seluruh tata letak Anda dan melihat bagaimana kotak itu berinteraksi dengan kotak lain.

Adapun terminologi, left, right, topdan bottomadalah CSS mengimbangi properti. Mereka digunakan untuk memosisikan elemen di lokasi tertentu (saat digunakan dengan absoluteatau fixedmemposisikan), atau untuk memindahkannya relatif ke lokasi defaultnya (saat digunakan dengan relativepemosisian). Margin di sisi lain menentukan celah antara kotak dan terkadang menciut, sehingga tidak dapat digunakan sebagai offset dengan andal.

Namun perhatikan bahwa dalam kasus Anda, offset tersebut tidak dapat dihitung (hanya) dari offset CSS.

Menyetel properti atas dan kiri ke nilai negatif mungkin bukan solusi yang baik jika masalah Anda hanya karena Anda berada dalam mode quirks. Hal ini dapat terjadi jika halaman kehilangan <!DOCTYPE>deklarasi, menyebabkannya dirender dalam mode quirks di IE8. Di Alat Pengembang IE8, pastikan bahwa "Mode Quirks" tidak dipilih di bawah "Mode Dokumen". Jika dipilih, Anda mungkin perlu menambahkan <!DOCTYPE>pernyataan yang sesuai .

Jika Anda menggunakan alat pengembang IE, pastikan Anda tidak meninggalkannya secara tidak sengaja di pengaturan yang lebih lama. Saya membuat diri saya sendiri gila dengan masalah yang sama sampai saya melihat bahwa itu telah diatur ke Standar Internet Explorer 7. Mengubahnya menjadi Standar Internet Explorer 9 dan semuanya langsung ke tempatnya.

memindahkan elemen atas: -12px atau memposisikannya sama sekali tidak menyelesaikan masalah tetapi hanya menutupinya

Saya memiliki masalah yang sama - periksa apakah Anda memiliki satu elemen pembungkus yang dicampur: elemen mengambang dengan elemen non-mengambang - elemen non-mengambang saya menyebabkan offset aneh ini ke yang mengambang

tentukan margin dan padding untuk elemen yang menghadapi masalah:

#element_id {margin: 0; padding: 0}  

dan lihat apakah ada masalah. IE merender laman dengan warisan yang lebih tidak diinginkan. Anda harus menghentikannya.

Hal ini tampaknya aneh, tapi Anda dapat mencoba pengaturan vertical-align: topdi CSSatas masukan. Itu memperbaikinya di IE8, setidaknya.

Saya memiliki masalah yang sama di situs web berbasis .NET kami, berjalan di DotNetNuke (DNN) dan yang menyelesaikannya bagi saya pada dasarnya adalah pengaturan ulang margin sederhana dari tag formulir. Situs web berbasis .NET sering kali dibungkus dalam bentuk dan tanpa mengatur ulang margin Anda dapat melihat offset aneh kadang-kadang muncul, kebanyakan ketika ada beberapa skrip yang disertakan.

Jadi jika Anda mencoba untuk memperbaiki masalah ini di situs Anda, coba masukkan ini ke dalam file CSS Anda:

form {
  margin: 0;
}

Anda dapat menerapkan reset css untuk menghilangkan 'default' tersebut. Berikut adalah contoh reset css http://meyerweb.com/eric/tools/css/reset/ . Cukup terapkan gaya setel ulang SEBELUM gaya Anda sendiri.

Saya memiliki masalah yang sama. Offset muncul setelah pembaruan UpdatePanel. Solusinya adalah menambahkan tag kosong sebelum UpdatePanel seperti ini:

<div></div>

...

Atur saja garis luarnya menjadi tidak seperti ini

[Identifier] {outline: none; }

Dalam kasus saya, offset ditambahkan ke elemen kustom dengan tata letak grid dalam li sedangkan ul adalah flexbox vertikal.

Solusi yang cukup sederhana adalah dengan mengatur mendefinisikan li sebagai elemen blok

li {
 display: block;
}

Dan offsetnya hilang