tôi đã thiết lập một phong cách trên <html>:<html> chiều rộng nhỏ hơn nền của nó
html {
background: #ECECEC;
border: 1px solid #FFFFFF;
}
Nếu nội dung của trang rộng hơn trang, tại sao không dừng lại biên giới, nhưng nền tiếp tục đi?
Dưới đây là một fiddle cho thấy các vấn đề: http://jsfiddle.net/rPGyc/3
html là một yếu tố khối cấp thích hợp, giống như body, p, div, vv - nó do đó quan sát tất cả các quy tắc tràn giống như các yếu tố khối khác làm.
Tuy nhiên, lý do tại sao nền của một dòng chảy tràn qua biên giới khung nhìn, là khung chứa html và tất cả nội dung của nó được hiển thị. Tuy nhiên, đường viền vẫn là một phần của phần tử html, do đó phần tử không mở rộng khi nội dung tràn. Hành vi này rất giống với cách áp dụng nền cho body, nhưng không phải html, làm cho nền của cơ thể lan truyền đến phần tử gốc, như được mô tả trong this answer trích dẫn this section of the spec.
Như Alohcinotes in a comment dưới câu trả lời, cùng áp dụng cho html liên quan đến chế độ xem:
Lưu ý rằng html cư xử đối với các khung nhìn theo cách tương tự với như cơ thể cư xử liên quan đến html, với nền thoát vượt quá giới hạn của phần tử html. Xem http://jsfiddle.net/GmAL4/4/ để xem ý tôi là gì.
Dưới đây là một chút sửa chữa sử dụng jquery
$("html").width($(document).width());
$("html").css("border", "1px solid black");
Tôi biết đó là què mà css một mình dường như không hoạt động tốt nhưng ít nhất chúng ta có thể có kết quả mong muốn với jquery.
đây là fiddle: http://jsfiddle.net/rPGyc/5/
Cách để ngăn chặn điều đó đang sử dụng thuộc tính bọc từ css3. Jsfiddle here
Chỉ cần thêm:
html{
background-color: lightgrey;
border: 1px solid #fff;
padding:0px;
margin:0px;
width:100%;
height:100%;
/*The important bit*/
word-wrap: break-word;
}
Câu hỏi hay! Có vẻ như ' 'và'
'đặc biệt giống như vậy, và chỉ cho' màu nền'. Gradients, ví dụ, không hành động giống nhau. – Ryanđây là một fiddle cho thấy vấn đề: http://jsfiddle.net/rPGyc/3/ – GregM
Tôi chưa bao giờ thấy ai thêm kiểu vào phần tử 'html' như thế này, chỉ có trên' body' hoặc tốt hơn, 'div' ngồi ngay bên trong' cơ thể'. Tôi nghĩ rằng nó sẽ là một 'div' mà sẽ cho bạn hiệu quả mong muốn của bạn, nhưng tôi không chắc chắn điều này trả lời câu hỏi của bạn. – cobaltduck