mam ustawić styl na <html>:<html> szerokość jest mniejsza niż jego tle
html {
background: #ECECEC;
border: 1px solid #FFFFFF;
}
Jeśli zawartość strony są szersze niż strona, dlaczego przystanek graniczny, ale w tle nie poddawać się?
Oto skrzypce, które pokazują problem: http://jsfiddle.net/rPGyc/3
html jest właściwym elementem blokowym, podobnie jak body, p, div, etc - to dlatego zachowuje wszystkie te same zasady przelewowych inne elementy blokowe zrobienia.
Jednak powodem, dla którego tło html wykracza poza jego granicę, gdy zawartość przepełnia jego szerokość (lub gdy jego szerokość jest mniejsza niż 100% okna przeglądarki lub rzutni), jest to, że kolor tła jest propagowany do rzutnia, która jest płótnem zawierającym html i całą zawartością, która jest renderowana. Granica pozostaje częścią elementu html, więc element nie rozwija się, gdy zawartość się przepełni. To zachowanie jest bardzo podobne do tego, jak zastosowanie tła do body, ale nie html, powoduje, że tło ciała jest propagowane do elementu głównego mimo to, jak opisano w this answer, które przytacza this section of the spec.
Jak Alohcinotes in a comment pod odpowiedzią, to samo dotyczy html względem rzutni:
Zauważ, że html zachowuje się w stosunku do rzutni w taki sam sposób, jak ciało zachowuje się w stosunku do HTML, z tłem wychodzącym poza obręb elementu html. Zobacz http://jsfiddle.net/GmAL4/4/, aby zobaczyć, co mam na myśli.
Oto mały dylemat przy użyciu jQuery
$("html").width($(document).width());
$("html").css("border", "1px solid black");
wiem, że to lame że css sam nie wydaje się działać prawidłowo, ale przynajmniej możemy mieć pożądany wynik z jquery.
oto skrzypce: http://jsfiddle.net/rPGyc/5/
Sposób na uniknięcie tego za pomocą właściwości zawijania słowa css3. Jsfiddle here
Wystarczy dodać:
html{
background-color: lightgrey;
border: 1px solid #fff;
padding:0px;
margin:0px;
width:100%;
height:100%;
/*The important bit*/
word-wrap: break-word;
}
Dobre pytanie! Po prostu wydaje się, że '' 'i'
'są wyjątkowe, i tylko dla' background-color'. Na przykład gradienty nie działają tak samo. – RyanOto skrzypce, które pokazują problem: http://jsfiddle.net/rPGyc/3/ – GregM
Nigdy nie widziałem nikogo, kto dodawałby stylu do elementu 'html' w ten sposób, tylko na' ciele' lub jeszcze lepiej, 'div' siedzi właśnie wewnątrz' ciała'. Myślę, że to będzie taki "div", który da ci pożądany efekt, ale nie jestem pewien, czy to odpowiada na twoje pytanie. – cobaltduck