Cách ngăn gói bố cục nổi khi zoom thu nhỏ được giảm

Với HTML sau. Nó hiển thị hai cột: #left, #right. Cả hai đều có chiều rộng cố định và có đường viền 1px. Chiều rộng và đường viền bằng với kích thước của vùng chứa trên: #wrap.Cách ngăn gói bố cục nổi khi zoom thu nhỏ được giảm

Khi tôi thu nhỏ Firefox 3.5.2 bằng cách nhấn Ctrl + - cột được gói (demo).

Làm cách nào để ngăn chặn điều này?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Test</title> 
    <style type="text/css"> 
     div   {float:left} 
     #wrap   {width:960px} 
     #left, #right {width:478px;border:1px solid} 
    </style> 
    </head> 
    <body> 
    <div id="wrap"> 
     <div id="left"> 
     left 
     </div> 
     <div id="right"> 
     right 
     </div> 
    </div> 
    </body> 
</html>

Nguồn

2009-08-13 Dmitri Zhuchkov

Tôi không chắc rằng tôi hoàn toàn hiểu rõ trường hợp của bạn. Giảm zoom sẽ có hiệu lực thu nhỏ. Bạn có nói rằng khi bạn thu nhỏ các cột quấn quanh?

Bạn nên nổi những divs sử dụng mã này trong CSS của bạn:

#container {width: 960px} 
#left {float: left} 
#right {float: right}

Nếu điều này không làm việc bạn có thể thử để lại một khoảng trống nhỏ giữa các cột bằng cách điều chỉnh độ rộng để bù đắp cho một số khác biệt trình duyệt nhỏ.

EDITED (bỏ qua ở trên):

Thấy như bạn đã cung cấp cho tôi biết thêm thông tin, tôi cần phải nói với bạn rằng trình duyệt kết hợp làm tròn khi thay đổi kích thước và có những kích thước chính xác pixel hoàn hảo không phải là điều thông minh nhất để làm.

Thay vào đó, bạn có thể có một div có một chiều rộng tuyệt đối và người kia có một chiều rộng tự động như sau:

#container {width: 960px;} 
#left {width: 478px;} 
#right {width: auto;}

này sẽ có trình duyệt mất nhiều không gian cho #right như có thể có thể được thực hiện bên trong div #wrap. Hãy chắc chắn để thiết lập một chiều rộng cho bọc, nếu không nó sẽ mất 100% của cửa sổ.

Tôi hy vọng điều này sẽ hữu ích!

EDITED:

phải rất gần với chiều rộng cố định của bạn, bởi vì bạn đã xác định chiều rộng của thùng chứa của bạn đã, vì vậy nó chỉ đơn giản là chiều rộng chứa trừ bởi chiều rộng của phía bên trái. Đây chỉ là để đảm bảo rằng không có sự khác biệt khi thay đổi kích thước cửa sổ.

Tôi hiểu rằng nó sẽ không chiếm toàn bộ diện tích không gian, tuy nhiên, khi nội dung được thêm vào, giá trị tối đa sẽ là vùng chứa - chiều rộng bên trái. Bạn đang cố gắng áp dụng một nền tảng? Trong trường hợp đó, đặt nền bên phải làm nền vùng chứa và sau đó là cạnh bên trái làm nền bên trái (đảm bảo nó bao phủ một nửa của nền).

Tôi hy vọng tôi đã trợ giúp.

Nguồn

2009-08-13 19:44:48

Tôi đã mở rộng câu hỏi của mình bằng bản trình diễn. Phao phải và trái sẽ không giúp được gì. Giảm chiều rộng của các cột giúp nhưng nó chỉ là một lựa chọn có sẵn? –

Tôi đã cập nhật ví dụ của mình ở trên. –

#right {width: auto;} giúp với gói nhưng điều này không làm cho chiều rộng cố định #right. Nếu #right không có đủ nội dung thì nó sẽ nhỏ hơn 478px; –

Vấn đề là do chiều rộng của #wrap của bạn gây ra.

Tôi đã đặt chiều rộng thành 100% và không bị vỡ nữa trong Firefox khi thu nhỏ bằng CTRL -.

Nguồn

2009-08-13 21:09:55 ChrisBenyamin

Có, nhưng nếu họ muốn đặt chiều rộng thành 960px vì lý do (giả sử, để sử dụng hệ thống lưới 960.gs) hoặc nếu họ muốn căn giữa nội dung, họ sẽ cần đặt chiều rộng cho vùng chứa. –

Dmitri,

Khi trình duyệt caluclates chiều rộng mới của divs của bạn sau khi bạn phóng to, nó không có giảm hai 478px + 4px của các yếu tố biên giới tương ứng với đơn 960px.Vì vậy, bạn kết thúc với điều này:

phong cách ban đầu của bạn:

#wrap equals 960px wide 
#left & #right, plus border equals 960px wide

Tất cả những gì phù hợp độc đáo.

Phóng giảm (Ctrl-)

#wrap equals (approx.) 872px wide. 
#left, #right, plus border eqauls 876px wide. 
(left and right reduce to approx 436px each, plus 4 px of border)

Nội dung là quá rộng cho #wrap. Để xem &, tính năng này chỉ áp dụng màu nền cho #wrap.

Để khắc phục, hãy xóa chiều rộng khỏi #wrap. Bởi vì nó được thả nổi, nó sẽ shink để phù hợp với nội dung. Tuy nhiên, bạn nên áp dụng chiều rộng cho các phần tử nổi và div {float: left} của bạn áp dụng nó cho #wrap.

Xóa div kiểu {float: left} và thêm float: left to #left, #right.

#left, #right {float:left;width:478px;border:1px solid}

Nếu bạn muốn #wrap được làm trung tâm, sau đó bạn sẽ cần phải khai báo một chiều rộng cho nó một lần nữa và thêm margin: 0 auto ;, trong trường hợp này bạn sẽ có vấn đề này một lần nữa [sửa: hoặc bạn có thể, như chris chỉ ra, thiết lập chiều rộng đến 100%]. Vì vậy, chỉ cần tính toán lại chiều rộng của #left, #right để chúng phù hợp.

Đó là sự hiểu biết của tôi rằng để lại một phòng thở chút giữa chiều rộng của các yếu tố cha mẹ và con là tốt để tránh điều này loại vấn đề nào.

Nguồn

2009-08-13 21:13:15

hãy thử chuyển sang một khác nhau box model như sau:

#left, #right 
{ 
    width:480px; 
    border:1px solid; 
    box-sizing: border-box; 

    /* and for older/other browsers: */ 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -webkit-box-sizing: border-box 
}

Nguồn

2009-08-13 21:20:29

Điều này giải quyết được vấn đề của tôi. Tôi đã sử dụng kết hợp La bàn: http://compass-style.org/reference/compass/css3/box_sizing/ – jedmao

Có ai giải thích tại sao điều đó xảy ra không? Tôi đã gặp vấn đề tương tự trên trang web của mình, [Goodwill Fire 18] (http://www.goodwillfire18.com/). Cả "News Feed" và thanh bên phải được thả sang trái và phải. Thanh bên phải có đường viền, tương tự như đường viền của OP. Khi bạn thu nhỏ trong Firefox, nó sẽ đặt thanh bên phải ở phía dưới cùng. – Kayla

tôi gặp phải vấn đề tương tự mô tả ở trên. Sau đó, vô vọng lang thang trên internet trong vài phút, tôi phát hiện ra rằng dường như đó là một lỗi trong Firefox 3.5.x và IE 7/8. Lỗi này vẫn còn hiện diện như của bài viết này.

Để xem chi tiết về lỗi đi ở đây: http://markasunread.com/?p=61 (trước đây là http://markasunread.com/2009/06/zoom-bug-in-ie78-and-firefox-caused-by-border/)

Nguồn

2010-03-25 12:20:45 detj

Lỗi vẫn tồn tại trên Firefox 29.0.1 – Kayla

Tôi đã vật lộn với lỗi này quá. Tôi đã có một điều hướng tab với chiều rộng cố định trên mỗi tab và một lề phải tất cả tổng chiều rộng của div container.

Tôi thực sự đã phát hiện một giải pháp mới, có vẻ như hoạt động tốt. Điều hướng tab tất nhiên được gói trong thẻ ul. Tôi đặt chiều rộng trên thẻ ul này lớn hơn khoảng 6px so với div vùng chứa. Ví dụ: div vùng chứa rộng 952px, sau đó thẻ ul rộng 958px. Kể từ khi các thẻ li trong điều hướng được thả nổi bên trái và có độ rộng cố định, chúng sẽ không vượt quá 952px, tuy nhiên phần tử ul có một số phòng thở, có vẻ như cần thiết để đè bẹp lỗi này. Tôi đã thử phóng to trong Firefox và IE7/8 và các tab vẫn giữ nguyên.

Hy vọng điều này sẽ giúp ai đó tiết kiệm một vài phút/giờ!

Nguồn

2010-11-24 03:36:48 dfw

Tôi có vấn đề tương tự. Đặt #right thành lề âm đã hoạt động. Ví dụ:

#right{ 
    margin-right:-400px; 
}

Nguồn

2011-03-23 12:32:48 stiopa

kẻ Ok, khi bạn có một div với chiều cao cố định, để ngăn chặn zoom từ phá vỡ tất cả mọi thứ, thêm overflow:hidden để nó css. Điều đó đã làm cho các trick cho tôi và bây giờ mọi trình duyệt có thể đi zoom điên.:)

Nguồn

2011-12-15 20:01:01

Giải pháp tốt nhất để sửa lỗi nổi trong mọi trường hợp là sử dụng bố cục bảng bằng cách sử dụng tds. Điều đó sẽ không bao giờ trôi nổi.

Nguồn

2014-05-28 10:13:23

Cách ngăn gói bố cục nổi khi zoom thu nhỏ được giảm

Trả lời

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