CSS kullanarak bir elemanın ofsetinden nasıl kurtulurum?

Bazı öğelerle ilgili bir konumlandırma sorunum var, IE8 Geliştirici araçlarını inceledikten sonra bana şunu gösteriyor:

Şimdi sorunumun bu 12 ofset olduğundan oldukça eminim, ama bunu nasıl kaldırırım ? CSS ofset özelliğinden bahsedildiğini bulamıyorum. Marjına ek olarak bir Offset'e ihtiyacımız var mı?

İşte bunu üreten kod:

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

Uzaklığı olan öğe inputBox

Bu uzaklık, temel olarak tarayıcının, css özelliğine göre öğe için hesapladığı x, y konumudur. Öyleyse, <br>ondan veya başka bir elemanın önüne bir koyarsanız , ofseti değiştirir. Örneğin, bunu 0 olarak ayarlayabilirsiniz:

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

veya

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

Bu nedenle, sahip olduğunuz konumlandırma sorunu ne olursa olsun, mutlaka bir ofset sorunu değildir, ancak her zaman üst, sol, sağ ve alt özelliklerle oynayarak düzeltebilirsiniz.

Sorunlu tarayıcınız uyumsuz mu?

Benim için öyleydi vertical-align: baselinevs vertical-align: topofset üst neden olduğunu.

Ayarlamayı dene vertical-align: top

Hızlı düzeltme:

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

bu dengeleri dengelemeli, ancak belki de tüm düzeninize bir göz atmalı ve bu kutunun diğer kutularla nasıl etkileşime girdiğini görmelisiniz.

Terminoloji gelince, left, right, topve bottomCSS ofset özellikleri. Öğeleri belirli bir konuma konumlandırmak için (birlikte kullanıldığında absoluteveya fixedkonumlandırmada) veya varsayılan konumlarına göre ( relativekonumlandırma ile kullanıldığında ) taşımak için kullanılırlar . Öte yandan kenar boşlukları kutular arasındaki boşlukları belirtir ve bazen daralır, bu nedenle ofsetler olarak güvenilir bir şekilde kullanılamazlar.

Ancak, sizin durumunuzda bu ofsetin (yalnızca) CSS ofsetlerinden hesaplanamayacağını unutmayın .

Üst ve sol özelliklerini negatif değerlere ayarlamak, sorununuz sadece tuhaflıklar modundaysanız, iyi bir geçici çözüm olmayabilir. Bu, sayfada bir <!DOCTYPE>bildirim eksikse gerçekleşebilir ve IE8'de tuhaflıklar modunda işlenmesine neden olur. IE8 Geliştirici Araçlarında, "Belge Modu" altında "Tuhaflıklar Modu" nun seçilmediğinden emin olun. Seçilirse, uygun <!DOCTYPE>beyanı eklemeniz gerekebilir .

IE geliştirici araçlarını kullanıyorsanız, yanlışlıkla eski bir ayarda bırakmadığınızdan emin olun. Internet Explorer 7 Standartlarına ayarlandığını görünceye kadar aynı sorunla kendimi delirtiyordum. Internet Explorer 9 Standartlarına değiştirildi ve her şey yerine oturdu.

öğeyi yukarı taşıma: -12px veya konumlandırmak kesinlikle sorunu çözmez, sadece maskeler

Ben de aynı sorunu yaşadım - bir sarmalama öğesinde karışık olup olmadığınızı kontrol edin: kayan olmayan öğelerle yüzen öğeler - kayan olmayan öğem bu garip kaymaya yüzen öğeye neden oldu

sorunla karşı karşıya olan öğe için kenar boşluğunu ve dolguyu tanımlayın:

#element_id {margin: 0; padding: 0}  

ve sorun olup olmadığına bakın. IE, sayfayı daha fazla istenmeyen kalıtımla işler. bunu yapmasını engellemelisin.

Bu garip görünüyor ama ayarı deneyebilirsiniz vertical-align: topiçinde CSSgirişler için. Bu, en azından IE8'de bunu düzeltir.

DotNetNuke (DNN) üzerinde çalışan .NET tabanlı web sitemizde de aynı sorunu yaşadım ve benim için çözen temelde form etiketinin basit bir marj sıfırlamasıydı. .NET tabanlı web siteleri genellikle bir forma sarılır ve kenar boşluğunu sıfırlamadan garip ofsetin bazen, çoğunlukla dahil edilen bazı komut dosyaları olduğunda göründüğünü görebilirsiniz.

Bu nedenle, sitenizde bu sorunu çözmeye çalışıyorsanız, bunu CSS dosyanıza girmeyi deneyin:

form {
  margin: 0;
}

Bu 'varsayılanlardan' kurtulmak için bir sıfırlama css uygulayabilirsiniz. Burada bir sıfırlama css örneği http://meyerweb.com/eric/tools/css/reset/ . Sıfırlama stillerini kendi stillerinizden ÖNCE uygulayın.

Ben de aynı sorunu yaşadım. Göreli konum UpdatePanel yenilendikten sonra ortaya çıktı. Çözüm, UpdatePanel'den önce şu şekilde boş bir etiket eklemekti:

<div></div>

...

Sadece ana hatları böyle hiçbir şeye ayarlamayın

[Tanımlayıcı] {anahat: yok; }

Benim durumumda, ul dikey bir flexbox iken, bir li içinde ızgara düzenine sahip özel bir öğeye ofset eklendi.

Oldukça basit çözüm, li'yi blok öğesi olarak tanımlamaktı.

li {
 display: block;
}

Ve ofset gitti