Làm cách nào để loại bỏ phần tử bù đắp bằng CSS?

Tôi gặp sự cố định vị với một số yếu tố, khi kiểm tra công cụ IE8 Developer, tôi thấy điều này:

Bây giờ tôi khá chắc chắn rằng vấn đề của tôi là bù đắp 12, nhưng làm cách nào để loại bỏ nó ? Tôi không thể tìm thấy bất kỳ đề cập nào về thuộc tính bù CSS. Chúng ta có cần một khoản chênh lệch ngoài ký quỹ không?

Đây là mã tạo ra điều này:

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

Phần tử có phần bù là inputBox

Độ lệch đó về cơ bản là vị trí x, y mà trình duyệt đã tính toán cho phần tử dựa trên thuộc tính css position của nó. Vì vậy, nếu bạn đặt một <br>trước nó hoặc bất kỳ phần tử nào khác, nó sẽ thay đổi phần bù. Ví dụ: bạn có thể đặt nó thành 0 bằng cách:

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

hoặc là

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

Do đó, bất kỳ vấn đề định vị nào bạn gặp phải, không nhất thiết là vấn đề với độ lệch, mặc dù bạn luôn có thể khắc phục nó bằng cách chơi với các thuộc tính trên, trái, phải và dưới cùng.

Vấn đề của bạn là trình duyệt không tương thích?

Đối với tôi, nó vertical-align: baselineso với vertical-align: topđiều đó đã gây ra sự bù đắp hàng đầu.

Cố gắng thiết lập vertical-align: top

Sửa nhanh:

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

điều này sẽ cân bằng những khoảng cách đó, nhưng có thể bạn nên xem xét toàn bộ bố cục của mình và xem cách hộp đó tương tác với các hộp khác.

Đối với thuật ngữ, left, right, topvà bottomlà CSS bù đắp tài sản. Chúng được sử dụng để định vị các phần tử tại một vị trí cụ thể (khi được sử dụng với absolutehoặc fixedđịnh vị) hoặc để di chuyển chúng liên quan đến vị trí mặc định của chúng (khi được sử dụng với relativeđịnh vị). Mặt khác, lề chỉ định khoảng trống giữa các hộp và đôi khi chúng bị sụp xuống, vì vậy chúng không thể được sử dụng một cách đáng tin cậy như các phần bù.

Nhưng lưu ý rằng trong trường hợp của bạn, phần bù đó có thể không được tính (chỉ) từ các phần bù CSS.

Đặt thuộc tính trên cùng và bên trái thành giá trị âm có thể không phải là một giải pháp tốt nếu vấn đề của bạn chỉ đơn giản là bạn đang ở chế độ kỳ quặc. Điều này có thể xảy ra nếu trang thiếu phần <!DOCTYPE>khai báo, khiến trang được hiển thị ở chế độ quirks trong IE8. Trong Công cụ dành cho nhà phát triển IE8, hãy đảm bảo rằng "Chế độ Quirks" không được chọn trong "Chế độ Tài liệu". Nếu nó được chọn, bạn có thể cần thêm <!DOCTYPE>khai báo thích hợp .

Nếu bạn đang sử dụng các công cụ dành cho nhà phát triển IE, hãy đảm bảo rằng bạn không vô tình để chúng ở một cài đặt cũ hơn. Tôi đã tự làm mình phát điên với vấn đề tương tự này cho đến khi tôi thấy rằng nó được đặt thành Tiêu chuẩn Internet Explorer 7. Đã thay đổi nó thành Tiêu chuẩn Internet Explorer 9 và mọi thứ đã ổn định.

chuyển phần tử lên trên cùng: -12px hoặc định vị nó hoàn toàn không giải quyết được vấn đề mà chỉ che dấu nó

Tôi đã gặp vấn đề tương tự - hãy kiểm tra xem bạn có trong một phần tử bao bọc bị trộn lẫn không: phần tử nổi với phần tử không nổi - phần tử không nổi của tôi đã gây ra sự chênh lệch kỳ lạ này cho phần tử nổi

xác định lề và phần đệm cho phần tử đang gặp vấn đề:

#element_id {margin: 0; padding: 0}  

và xem nếu vấn đề tồn tại. IE kết xuất trang với nhiều kế thừa không mong muốn hơn. bạn nên ngăn nó làm như vậy.

Điều này có vẻ lạ, nhưng bạn có thể thử thiết lập vertical-align: toptrong CSScho đầu vào. Điều đó khắc phục được nó trong IE8, ít nhất.

Tôi đã gặp vấn đề tương tự trên trang web dựa trên .NET của chúng tôi, chạy trên DotNetNuke (DNN) và điều đã giải quyết được vấn đề đó cho tôi về cơ bản là đặt lại lề đơn giản của thẻ biểu mẫu. Các trang web dựa trên .NET thường được bao bọc trong một biểu mẫu và nếu không đặt lại lề, bạn có thể thấy sự chênh lệch kỳ lạ đôi khi xuất hiện, chủ yếu là khi có một số tập lệnh bao gồm.

Vì vậy, nếu bạn đang cố gắng khắc phục sự cố này trên trang web của mình, hãy thử nhập thông tin này vào tệp CSS của bạn:

form {
  margin: 0;
}

Bạn có thể áp dụng css đặt lại để loại bỏ các 'mặc định' đó. Đây là một ví dụ về css đặt lại http://meyerweb.com/eric/tools/css/reset/ . Chỉ cần áp dụng các kiểu đặt lại TRƯỚC các kiểu của riêng bạn.

Tôi đã từng gặp vấn đề tương tự. Phần bù xuất hiện sau khi làm mới UpdatePanel. Giải pháp là thêm một thẻ trống trước UpdatePanel như sau:

<div></div>

...

Chỉ cần đặt đường viền không giống như thế này

[Định danh] {outline: none; }

Trong trường hợp của tôi, phần bù đắp đã được thêm vào một phần tử tùy chỉnh với bố cục lưới trong một li trong khi ul là một hộp uốn dọc.

Giải pháp khá đơn giản là đặt định nghĩa li là phần tử khối với

li {
 display: block;
}

Và phần bù đã biến mất