1. Trang chủ
  2. Câu hỏi và trả lời
  3. Trung tâm nền với chrome (lỗi)

Trung tâm nền với chrome (lỗi)

2011-06-23 79 views
7

Tôi có hình nền ở giữa mà Chrome hiển thị được bù đắp bằng một pixel.Trung tâm nền với chrome (lỗi)

CSS

#container { 
    background: url("images/header.jpg") no-repeat scroll 50% transparent; 
    width: 100% 
} 
#header { 
    width: 986px; 
    margin: 100px auto 0 auto; 
}

HTML

<html> 
<body> 
    <div id="container"> 
     <div id="header">centered content</div> 
    </div> 
</body> 
</html>

Tôi đoán nó đã làm với cách trình duyệt khác nhau xử lý các center -Hoặc 50% - tài sản của background trong CSS:

enter image description here

Có phương pháp hack hoặc thay thế đã biết (simple) để sửa lỗi này không? Vùng chứa nền có rộng 100%.

Nguồn

2011-06-23 Naoise Golden

Trả lời

3

Đối với tôi, điều này đã làm các trick:

@media screen and (-webkit-min-device-pixel-ratio:0) { 

html { 
    margin-left: 1px; 
} 

}

tôi sẽ gửi link cho điều này giải pháp ngay sau khi tôi tìm thấy là tôi đã nhận nó từ một vài ngày trước. Trong cùng một bài đăng, anh chàng cho biết vấn đề là với số lẻ hoặc thậm chí cho chiều rộng vùng chứa. Dù sao, điều này đã khắc phục được sự cố trong trường hợp của tôi.

Nguồn

2011-07-05 22:08:42 ronaldosantana

+0

gọn gàng! truy vấn phương tiện là khóa, nhưng trong trường hợp của tôi, mã là: '@media screen và (-webkit-min-device-pixel-ratio: 0) {#container {background-position: 49.9% hàng đầu; }} '(thay đổi câu trả lời nếu bạn có thể) –

0

Hình ảnh có thực sự là 986px không? Cách dễ nhất tôi tìm thấy để khắc phục nó là đảm bảo chiều rộng của hình ảnh là số chẵn.

Một điều khác bạn có thể làm là thêm bộ đệm 2px (để giữ chiều rộng là số chẵn) trong hình nền để giải thích cho sự thay đổi đó. Nó không nên thay đổi hình ảnh của bạn như được xem trong trình duyệt miễn là bạn thêm một px để mỗi bên để giữ cho nó tất cả.

Nguồn

2011-06-23 12:42:08 Shauna

+0

cảm ơn bạn đã trả lời. Nền là 986px, nhưng tôi không hiểu làm thế nào làm cho nó thậm chí sẽ làm việc ... sau đó nó woul xuất hiện off-balance trong các trình duyệt khác mà bây giờ làm cho nó một cách chính xác. Ngoài ra, bạn có thể vui lòng giải thích cho tôi về việc thêm một _buffer_ 2px không? Cảm ơn bạn –

+0

@Naoise - Theo kinh nghiệm của tôi, nó không ảnh hưởng đến các trình duyệt khác nếu bạn thêm hoặc xóa một pixel để làm cho chiều rộng là số chẵn. Điều tôi ngụ ý bằng cách thêm "bộ đệm" là thêm pixel ở hai bên của hình ảnh (làm rộng 988px, thay vì rộng 986px) để tiếp tục hình ảnh (do đó góc cong sẽ tiếp tục xuống và phần màu xám sẽ mở rộng ra một pixel). Giữ div ở mức 986px, vì vậy các trình duyệt khác sẽ cắt hình ảnh khi cần. – Shauna

0

Thử thay đổi kích thước trình duyệt để xem nó hoạt động như thế nào ... chúng ta đang nói về pixel ở đây và nếu cửa sổ có chiều rộng đều là ok, nếu không pixel sẽ bị mất ở đâu đó tôi đoán.

Nguồn

2011-06-23 12:42:52

+0

vâng, thay đổi kích thước làm cho nó phù hợp một cách chính xác một số lần ... nhưng hầu hết thời gian là ngoài cân bằng. Điều này là do cách Chrome tính toán số thập phân tính bằng pixel ... Tôi đã hy vọng một số sửa lỗi nổi tiếng. –

+0

Làm thế nào về một 99% hoặc bạn có thể thử 99,9999% có thể. –

0

Tôi cho rằng hình ảnh backgroud cũng rộng 986 pixel? Sau đó, hiệu ứng này cũng nên được nhìn thấy ở phía bên trái, quay lại mặc dù.

Tôi đề nghị để loại bỏ các hình nền từ container và thêm nó vào các tiêu đề:

#container { 
    width: 100%; 
} 
#header { 
    width: 986px; 
    background: url("images/header.jpg") no-repeat scroll 50% transparent; 
    margin: 100px auto 0 auto; 
}

Nguồn

2011-06-23 12:46:43 NGLN

+0

vùng chứa nền phải rộng 100%, do đó nó không thể xuất hiện trong '# header' –

+0

@Naoise Golden Nếu hình nền rộng 986 pixel, bạn có thể thêm nó vào giữa tiêu đề. Tôi sẽ chỉnh sửa câu trả lời của mình để làm rõ. – NGLN

1

Nếu bạn thực hiện hình nền rộng một số lẻ (987px) vị trí sẽ nhất quán trên tất cả các trình duyệt. Nó có vẻ phản trực giác nhưng điều đó dường như luôn luôn khắc phục vấn đề cho tôi mà không có bất kỳ hack hacks CSS nào.

Nguồn

2012-07-24 00:44:48 Demian

+0

Điều này làm việc tuyệt vời cho tôi! Cảm ơn Demian. –

0

Tôi đã sử dụng bit CSS sau đây để khắc phục sự cố trên webkit.Nếu JS không được kích hoạt, nó hoạt động trên giả định rằng trình duyệt có thể sẽ được toàn màn hình, do vậy độ rộng khung nhìn trên webkit sẽ là một số lẻ

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    html { 
     margin-left: 1px; 
    } 
    html.evenWidth { 
     margin-left: 0px; 
    } 
}

Javascript (jquery)

$(document).ready(function { 
var oWindow = $(window), 
htmlEl = $('html'); 

function window_width() { 
    if(oWindow.width() % 2 == 0) { 
     htmlEl.addClass('evenWidth'); 
    } else { 
     htmlEl.removeClass('evenWidth'); 
    } 
} 

$(document).ready(function(){ 
    window_width(); 
    $(window).resize(window_width); 
});

Nguồn

2013-02-26 16:11:26

Các vấn đề liên quan

 Các vấn đề liên quan