ฉันจะกำจัดการชดเชยขององค์ประกอบโดยใช้ CSS ได้อย่างไร

ฉันมีปัญหาในการวางตำแหน่งกับองค์ประกอบบางอย่างเมื่อตรวจสอบเครื่องมือสำหรับนักพัฒนา IE8 มันแสดงให้ฉันเห็นสิ่งนี้:

ตอนนี้ฉันค่อนข้างแน่ใจว่าปัญหาของฉันคือ 12 ออฟเซ็ต แต่ฉันจะลบมันได้อย่างไร ฉันไม่พบการกล่าวถึงคุณสมบัติออฟเซ็ต CSS เราต้องการ Offset นอกเหนือจาก margin หรือไม่?

นี่คือรหัสที่สร้างสิ่งนี้:

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

องค์ประกอบที่มีค่าชดเชยคือ inputBox

ค่าชดเชยนั้นโดยพื้นฐานแล้วคือตำแหน่ง x, y ที่เบราว์เซอร์คำนวณสำหรับองค์ประกอบตามแอตทริบิวต์ตำแหน่ง css ดังนั้นถ้าคุณใส่<br>ก่อนมันหรือองค์ประกอบอื่น ๆ มันจะเปลี่ยนออฟเซ็ต ตัวอย่างเช่นคุณสามารถตั้งค่าเป็น 0 โดย:

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

หรือ

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

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

ปัญหาของเบราว์เซอร์เข้ากันไม่ได้หรือไม่?

สำหรับฉันมันเป็นvertical-align: baselineเทียบกับvertical-align: topที่ทำให้เกิดการชดเชยด้านบน

ลองตั้งค่า vertical-align: top

แก้ไขด่วน:

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

สิ่งนี้ควรทำให้สมดุลกับการชดเชยเหล่านั้น แต่บางทีคุณควรดูเลย์เอาต์ทั้งหมดของคุณและดูว่ากล่องนั้นโต้ตอบกับกล่องอื่นอย่างไร

ในฐานะที่เป็นคำศัพท์left, right, topและbottomมี CSS ชดเชยคุณสมบัติ ใช้สำหรับการกำหนดตำแหน่งองค์ประกอบในตำแหน่งเฉพาะ (เมื่อใช้กับตำแหน่งabsoluteหรือการfixedวางตำแหน่ง) หรือเพื่อเคลื่อนย้ายโดยเทียบกับตำแหน่งเริ่มต้น (เมื่อใช้กับการrelativeกำหนดตำแหน่ง) ในทางกลับกันระยะขอบระบุช่องว่างระหว่างกล่องและบางครั้งก็ยุบดังนั้นจึงไม่สามารถใช้เป็นค่าชดเชยได้อย่างน่าเชื่อถือ

แต่โปรดทราบว่าในกรณีของคุณการชดเชยอาจไม่ได้คำนวณ (แต่เพียงอย่างเดียว) จากออฟเซ็ต CSS

การตั้งค่าคุณสมบัติด้านบนและด้านซ้ายเป็นค่าลบอาจไม่ใช่วิธีแก้ปัญหาที่ดีหากปัญหาของคุณคือคุณอยู่ในโหมดแปลก ๆ กรณีนี้อาจเกิดขึ้นได้หากเพจไม่มีการ<!DOCTYPE>ประกาศทำให้แสดงผลในโหมดแปลก ๆ ใน IE8 ใน IE8 Developer Tools ตรวจสอบให้แน่ใจว่าไม่ได้เลือก "Quirks Mode" ใน "Document Mode" หากถูกเลือกคุณอาจต้องเพิ่มการ<!DOCTYPE>ประกาศที่เหมาะสม

หากคุณกำลังใช้เครื่องมือสำหรับนักพัฒนา IE ตรวจสอบให้แน่ใจว่าคุณไม่ได้ตั้งใจทิ้งไว้ที่การตั้งค่าที่เก่ากว่า ฉันกำลังทำให้ตัวเองคลั่งไคล้กับปัญหาเดียวกันนี้จนกระทั่งฉันเห็นว่ามันถูกตั้งค่าเป็นมาตรฐานของ Internet Explorer 7 เปลี่ยนเป็นมาตรฐานของ Internet Explorer 9 และทุกอย่างก็เข้าที่

การเคลื่อนย้ายองค์ประกอบด้านบน: -12px หรือการวางตำแหน่งไม่ได้ช่วยแก้ปัญหา แต่เพียงมาสก์

ฉันมีปัญหาเดียวกัน - ตรวจสอบว่าคุณมีองค์ประกอบการห่อแบบผสมอยู่หรือไม่: องค์ประกอบลอยกับองค์ประกอบที่ไม่ลอย - องค์ประกอบที่ไม่ลอยของฉันทำให้เกิดการชดเชยที่แปลกประหลาดนี้กับองค์ประกอบที่ลอยอยู่

กำหนดระยะขอบและช่องว่างภายในสำหรับองค์ประกอบที่ประสบปัญหา:

#element_id {margin: 0; padding: 0}  

และดูว่ามีปัญหาหรือไม่ IE แสดงผลหน้าด้วยการสืบทอดที่ไม่ต้องการมากขึ้น คุณควรหยุดไม่ให้ทำเช่นนั้น

นี้ดูเหมือนว่าแปลก แต่คุณสามารถลองตั้งค่าvertical-align: topในCSSสำหรับปัจจัยการผลิต ซึ่งแก้ไขได้ใน IE8 เป็นอย่างน้อย

ฉันมีปัญหาเดียวกันในเว็บไซต์ที่ใช้. NET ซึ่งทำงานบน DotNetNuke (DNN) และสิ่งที่แก้ไขได้สำหรับฉันก็คือการรีเซ็ตระยะขอบอย่างง่ายของแท็กฟอร์ม เว็บไซต์ที่ใช้. NET มักถูกรวมไว้ในรูปแบบและโดยไม่ต้องรีเซ็ตระยะขอบคุณจะเห็นการชดเชยแปลก ๆ ปรากฏขึ้นในบางครั้งโดยส่วนใหญ่จะมีสคริปต์บางส่วนรวมอยู่ด้วย

ดังนั้นหากคุณกำลังพยายามแก้ไขปัญหานี้ในไซต์ของคุณให้ลองป้อนสิ่งนี้ลงในไฟล์ CSS ของคุณ:

form {
  margin: 0;
}

คุณสามารถใช้รีเซ็ต css เพื่อกำจัด 'ค่าเริ่มต้น' เหล่านั้นได้ นี่คือตัวอย่างของ CSS รีเซ็ตhttp://meyerweb.com/eric/tools/css/reset/ เพียงใช้รูปแบบการรีเซ็ตก่อนสไตล์ของคุณเอง

ผมมีปัญหาเดียวกัน. ค่าชดเชยปรากฏขึ้นหลังจากการรีเฟรช UpdatePanel วิธีแก้คือเพิ่มแท็กว่างก่อน UpdatePanel ดังนี้:

<div></div>

...

เพียงแค่ตั้งค่าโครงร่างเป็นไม่มีเช่นนี้

[ตัวระบุ] {outline: none; }

ในกรณีของฉันมีการเพิ่มออฟเซ็ตให้กับองค์ประกอบที่กำหนดเองด้วยเค้าโครงตารางภายใน li ในขณะที่ ul เป็น flexbox แนวตั้ง

วิธีแก้ปัญหาที่ค่อนข้างง่ายคือตั้งค่ากำหนด li เป็นองค์ประกอบบล็อกด้วย

li {
 display: block;
}

และการชดเชยก็หายไป