Trang CSS-break-after và float không chơi độc đáo?

Nếu tôi có mã HTML sau:Trang CSS-break-after và float không chơi độc đáo?

<!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"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
     <title>Test</title> 
    </head> 
    <body> 
     <div style="page-break-after: always; float: left;">hello</div> 
     <div style="page-break-after: always; float: left;">there</div> 
     <div style="page-break-after: always; float: left;">bilbo</div> 
     <div style="page-break-after: always; float: left;">baggins</div> 
    </body> 
</html>

Tôi muốn một từ được in trên mỗi trang, với một ngắt trang sau mỗi một. (Đây là mã đơn giản - trong trang web thực sự của tôi, các phao nổi là quan trọng.)

Firefox in tiền phạt này, nhưng cả IE và Safari đều in trên một trang, bỏ qua ngắt trang. Đây có phải là lỗi trong các trình duyệt đó không? Có cách nào tốt hơn để làm điều này?

Cảm ơn.

Nguồn

2010-10-07 Colen

Bạn đang sử dụng phiên bản IE nào? Ngay cả IE 8 có vấn đề với điều này: http://www.w3schools.com/CSS/pr_print_pageba.asp vì vậy nếu bạn đang sử dụng một trong những cũ hơn IE8 có thể là thủ phạm. –

Đây là IE8 và tôi không sử dụng "trái", "phải" hoặc "kế thừa", vì vậy tôi không nghĩ rằng cảnh báo đó áp dụng ở đây ...? – Colen

Tôi biết bạn đang sử dụng luôn, nhưng khi IE8 chỉ hỗ trợ 1 việc thực hiện điều này, rất có thể IE7 sẽ thất bại. –

Đó là phao nổi đang làm rối tung lên để in.

Bạn có cần phao nổi để in không? hoặc là phao chỉ cần thiết cho web?

Tại sao tôi yêu cầu là bạn có thể có các lớp học CSS khác nhau cho phương tiện truyền thông khác nhau (in, màn hình) http://www.w3.org/TR/CSS2/media.html

Vì vậy, phao của bạn có thể được trên phương tiện truyền thông màn hình - mà sẽ chỉ hiển thị cho web. Trong khi bạn sẽ muốn ngắt trang của bạn chỉ để hiển thị cho phương tiện in.

Dưới đây là một ví dụ sử dụng các phương tiện truyền thông: (lưu ý khi tham khảo CSS bạn có thể chọn phương tiện truyền thông qua một thuộc tính)

<!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"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
    <title>Test</title> 
    <style> 
     @media print { 
     .myDiv { page-break-after: always; } 
     } 
     @media screen { 
     .myDiv {float:left;} 
     } 
    </style> 
    </head> 
    <body> 
    <div class="myDiv">hello</div> 
    <div class="myDiv">there</div> 
    <div class="myDiv">bilbo</div> 
    <div class="myDiv">baggins</div> 
    </body> 
    </html>

Cập nhật:

Sẽ làm việc này cho những gì bạn cần? Cung cấp cho bạn một 3x3 trên mỗi trang khi in ra. Nhưng trên màn hình nó là một 3x6. Mẫu nhanh.

<!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"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
    <title>Test</title> 
    <style>  
     .break 
     { 
        page-break-after: right; 
        width:700px; 
        clear:both; 
     } 
     .myDiv {  
     float:left; 
     width:200px; 
     height:100px; 
     background-color:blue; 
     margin:5px; 
     } 
     } 
    </style> 
    </head> 
    <body> 
    <div class="break"> 
     <div class="myDiv">1</div> 
     <div class="myDiv">2</div> 
     <div class="myDiv">3</div> 


     <div class="myDiv">4</div> 
     <div class="myDiv">5</div> 
     <div class="myDiv">6</div> 


     <div class="myDiv">7</div> 
     <div class="myDiv">8</div> 
     <div class="myDiv">9</div> 
    </div> 

    <div class="break"> 
     <div class="myDiv">11</div> 
     <div class="myDiv">22</div> 
     <div class="myDiv">33</div> 


     <div class="myDiv">44</div> 
     <div class="myDiv">55</div> 
     <div class="myDiv">66</div> 


     <div class="myDiv">77</div> 
     <div class="myDiv">88</div> 
     <div class="myDiv">99</div> 
    </div> 
    </body> 
    </html>

Nguồn

2010-10-07 22:34:25

Thật không may các phao là cần thiết để in - Tôi muốn mỗi div được in cạnh nhau, và sau đó phá vỡ sau khi thứ 9 (kể từ khi họ đang ở trong một lưới 3x3 trên trang). Có bất kỳ điều gì tôi có thể làm để làm tròn sự tương tác phá vỡ trang/dấu phẩy xấu không? – Colen

Tôi đã dành một chút ngày hôm qua cố gắng tìm ra cách để thực hiện điều đó trong IE (7-9beta). IT có vẻ như bất cứ khi nào mà phao là trên yếu tố đó nó sẽ làm điều đó. Tôi đã có một chút may mắn đặt trang-break-sau trên các yếu tố khác xung quanh các phao nổi và bên trong phao, nhưng kết quả không phải luôn luôn "sao". –

Cập nhật câu trả lời. Điều này sẽ làm việc trong IE. chỉ bao quanh 3x3 của bạn với một div có page-break-after. –

Trang CSS-break-after và float không chơi độc đáo?

Trả lời

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