| Autor | Zpráva | ||
|---|---|---|---|
| Petroff Profil |
#1 · Zasláno: 17. 9. 2007, 12:28:24 · Upravil/a: Petroff
V IE quirks: NEROZUMÍM - proč se zobrazí BORDER kolem MARGINu (místo naopak) ???
Ve všech IE (kromě IE7 standard): Jak mám docílit standardního chování ? 1. div {overflow:scroll} nefunguje 2. div {width: auto} nefunguje: má mít šířku = (body/width - body/marginleft - body/marginright) a zatím nelze dosáhnout menší hodnoty než 200px = šířka obsahu <p> <html> <head> <style> html,body,div { margin:0; padding:0; border: 3px solid; font: bold 20px serif } html { margin: 20px } body { margin-left: 100px; margin-right: 200px } /* quirks -> margin uvnitř border */ div { margin: 50px 0px; overflow:scroll } div , .divColor { border-color: green; color: green } body, .bodyColor { border-color: blue; color: blue } html, .htmlColor { border-color: red; color: red } p { width: 200px; border-width:0 ;background:#FFB} </style> </head> <body> <div> <p class="htmlColor"> html { border-color } </p> <p class="bodyColor"> body { border-color } </p> <p class="divColor"> div { border-color } </p> </div> </body> </html> Nevíte jakou mají prohlížeče výchozí hodnotu overflow u prvků html+body? |
||
| Gappa Profil |
#2 · Zasláno: 17. 9. 2007, 16:35:22
Nevíte jakou mají prohlížeče výchozí hodnotu overflow u prvků html+body?
Předpokládám, že auto. Btw, když chceš u IE docílit jakéhos-takéhos standardního chování, tak nepoužívej quirk :) |
||
| Petroff Profil |
#3 · Zasláno: 17. 9. 2007, 17:25:44
<to Gappa>
OVERFLOW = Zdá se mi, každý browser to má nějak jinak (problémy s posuvníky). Není špatné mít jen 2 varianty stylů: [ie7 opera ff....] [ie6 a nižší]. V tomto případě IE6 běží v quirku. Jde o to zjistit jak na to (vzhledem k množství odchylek se hůř shánějí informace). A pokud si načteš ten kód, tak zjistíš že standartní mód - pokud používáš IE6 - ještě nic neřeší; schválně jsem uvedl: Ve všech IE (kromě IE7 standard): |
||
|
Časová prodleva: 20 dní
|
|||
| Petroff Profil |
#4 · Zasláno: 7. 10. 2007, 22:00:41
Sám jsem zjistil, že v kompat.modu nastavit DIVu overflow:scroll je totéž jako overflow:auto a ke scrollu dojde jedině při kolizi rozměrů přímo zadaných nebo v procentech z nadř.prvku. Rozměr určený výpočtem z rozměru nadřazeného prvku a zadané hodnoty margin scroll u DIVu nevyvolá => objeví se scrollbar u prvku BODY.
Zbytek jsem vyčetl ze stránek MS - http://msdn2.microsoft.com/en-us/library/bb250395.aspx#cssenhancements _topic4 Prostě v kompatibilním X v standartním modu jsou pravidla zobrazení a chování prvků html a body odlišné, ale přesně popsané (odpovídají té mé ukázce) Další info v textu níže: prvek-rámec pro abs.pozicování | prvek se scrollbarem | pozadí v okně Who Moved My Canvas? This section describes the difference between how the BODY and HTML elements render when the !DOCTYPE declaration switches on standards-compliant mode with Internet Explorer 6 or later. In earlier versions of Internet Explorer, the BODY element represents the canvas—the entire surface onto which a document's content can be rendered. The size of the BODY element cannot be changed and equals the size of the window. Margins you set on this element are rendered inside the border and scroll bars of the element. As of Internet Explorer 6, when you use the !DOCTYPE declaration to switch on standards-compliant mode, the BODY element can obtain its size from its content, or you can set its size explicitly—like a DIV object, for example. In standards-compliant mode, the HTML element represents the canvas. When you switch on standards-compliant mode, the HTML element also becomes the positioning container for positioned elements that don't have a positioned parent. When standards-compliant mode is switched off, as with earlier versions of Internet Explorer, an absolutely positioned element is positioned relative to the BODY when there is no positioned parent. When standards-compliant mode is switched off, as with earlier versions of Internet Explorer, the BODY element represents the canvas. Scroll Bars The SCROLL attribute sets or retrieves a value that indicates whether scroll bars on the element are turned on. With Internet Explorer 6 or later, when you use the !DOCTYPE declaration to switch on standards-compliant mode, this attribute applies to the HTML element. When standards-compliant mode is switched off, as with earlier versions of Internet Explorer, this attribute applies to the BODY element, not the HTML element. Note The overflow, overflow-x and overflow-y attributes, which you can use to manage content that exceeds the size of its container, apply to the HTML element when standards-compliant mode is switched on. Separate Backgrounds You can specify separate background properties for the HTML and BODY elements. When standards-compliant mode is switched on, both backgrounds render clearly. This helps address a common problem—the background property is frequently defined on the BODY element, but the BODY has default margins, so only a narrow band shows up around the content of the BODY element. The following example shows how identical HTML elements render differently when you use the !DOCTYPE declaration in your document to switch on standards-compliant mode with Internet Explorer 6 or later. The HTML element has a red background, and the BODY element has a specified height and width. You can see the effect of these properties only when standards-compliant mode is switched on. When standards-compliant mode is not switched on, the BODY element fills the window, which prevents you from seeing the background of the HTML element. <html style="background:red"> <head> <title>Canvas Comparison</title> </head> <body style="background:blue; width:200px; height:150px"> <div style="background:yellow">Who moved my canvas?</div> </body> </html> |
||
|
Časová prodleva: 5 dní
|
|||
| Petroff Profil |
#5 · Zasláno: 12. 10. 2007, 12:27:53 · Upravil/a: Petroff
Promiňte mi nepřesnost hraničící s mystifikací = TÝKÁ SE 1.ODSTAVCE POSLEDNÍHO PŘÍSPĚVKU
Je to celé o něco složitější, tak jsem dodal testovací kód (DOCTYPE si upravte) a tabulku s výsledky získanými testy (doufám že už jsou OK) CITUJI Z ODSTAVCE: 1.Rozměr určený výpočtem (z rozměru nadřazeného prvku a zadané hodnoty margin)....objeví se scrollbar u prvku BODY ---> POPISUJE SYMBOL minW 2.Nastavit DIVu overflow:scroll je totéž jako overflow:auto ----> POPISUJE SYMBOL -S 3.Ke scrollu dojde jedině při kolizi rozměrů přímo zadaných nebo v procentech z nadř.prvku......PLATÍ VŽDY ___hasLayout | 1.STANDARD | 2.QUIRKS | 1.symbol = Chování šířky DIVu (velikost odvozena z BODY: margin-left = margin-right = 100px) auto - width:auto (normální) minW - min-width: šířka obsahu [P{width:200px}]....Zároveň dojde k zobrazení H-scrollbaru okna (při zúžení DIVu pod 200px) 2.symbol = Zobrazení posuvníku (nastavena hodnota overflow:scroll) +S - zobrazen ( ~ overflow:scroll ) -S - nezobrazen ( ~ overflow:auto ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> div {margin: 20px 100px; overflow: scroll} div.YES_hasLayout {border: thick solid red; height:50px} div.NO_hasLayout {border: thin solid black} p {width: 200px; background: yellow} </style> </head> <body> <div class="YES_hasLayout"> <p> width = 200px <br> div (+)hasLayout </p> </div> <div class="NO_hasLayout"> <p> width = 200px <br> div (-)hasLayout </p> </div> </body> </html> |
||
|
Časová prodleva: 17 let
|
|||
0