1. Das Farbproblem der Bildlaufleiste unter xhtml
Im Original-HTML können wir die Bildlaufleiste der gesamten Seite wie folgt definieren:
body{ scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/ scrollbar-highlight-color:#fff; /*- 左二 -*/ scrollbar-face-color:#E4E4E4; /*- 面子 -*/ scrollbar-arrow-color:#666; /*- 箭头 -*/ scrollbar-shadow-color:#808080; /*- 右二 -*/ scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/ scrollbar-base-color:#D7DCE0; /*- 基色 -*/ scrollbar-track-color:#;/*- 滑道 -*/ }
Aber mit dem Derselbe Code, wir Die Anwendung wird unter xhtml nicht funktionieren. Ich glaube, viele gute Freunde sind auf das gleiche Problem gestoßen.
Wie kann ich den Bildlaufleistenstil unter XHTML anwenden? Schauen Sie sich den folgenden Code an:
html{ scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/ scrollbar-highlight-color:#fff; /*- 左二 -*/ scrollbar-face-color:#E4E4E4; /*- 面子 -*/ scrollbar-arrow-color:#666; /*- 箭头 -*/ scrollbar-shadow-color:#808080; /*- 右二 -*/ scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/ scrollbar-base-color:#D7DCE0; /*- 基色 -*/ scrollbar-track-color:#;/*- 滑道 -*/ }
Der einzige Unterschied zwischen diesem Code und dem vorherigen besteht darin, dass in den durch CSS definierten Elementen eines der Körper und das andere ein HTML ist. Lassen Sie es uns noch einmal testen und den „Körper“ der HTML-Seite in „HTML“ ändern, um es zu testen und festzustellen, dass der Effekt immer noch erzielt werden kann. Warum also?
Schauen wir uns das Bild unten an:
Dies ist die grundlegendste Dom-Baumstruktur von HTML.
Sehen wir uns die Definitionen von HTML und XHTML an:
HTML (Hyper Text Markup Language, Hyper Document Markup Language), Hyper Document Markup Language wird im Internet häufig verwendet der Benchmark wird gerendert und wie Hyperlinks zu anderen Seiten führen.
XHTML (Extensible Hypertext Markup Language, Extensible Hypertext Markup Language) ist eine Auszeichnungssprache, deren Ausdruck HTML ähnelt, die Syntax jedoch strenger ist. In Bezug auf die Vererbungsbeziehung ist HTML eine auf SGML basierende Anwendung und sehr flexibel, während XHTML auf XML basiert, einer Teilmenge von SGML. XHTML 1.0 wurde am 26. Januar 2000 zu einer W3C-Empfehlung.
Xhtml hat im wahrsten Sinne des Wortes ein x mehr als HTML, also ist dieses x tatsächlich XML. Warum müssen wir XML hinzufügen? Tatsächlich besteht der grundlegendste Grund darin, HTML strukturierter und standardisierter zu gestalten (weil HTML wirklich schlecht ist).
OK, schauen wir uns den Strukturbaum oben an. Da HTML nicht sehr standardisiert ist, kann dies wirksam sein, aber in XHTML wird dies nicht funktionieren Offensichtlich ist das Body-Tag selbst nicht das Root-Element, nur HTML ist das Root-Element, und die Bildlaufleiste der Seite gehört auch zum Root-Element. Aus diesem Grund hat unsere Definition von Body keine Auswirkung Wir definieren, dass es sich nur um ein Unterelement handelt. OK, wir kennen das Prinzip. Machen wir ein Experiment, indem wir die Definition von „body“ oder „xhtml“ durch „*“ ersetzen:
*{ scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/ scrollbar-highlight-color:#fff; /*- 左二 -*/ scrollbar-face-color:#E4E4E4; /*- 面子 -*/ scrollbar-arrow-color:#666; /*- 箭头 -*/ scrollbar-shadow-color:#808080; /*- 右二 -*/ scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/ scrollbar-base-color:#D7DCE0; /*- 基色 -*/ scrollbar-track-color:#;/*- 滑道 -*/ }
在html和xhtml都通过,因为*就是定义页面上的任何标签当然也包括了“html”这个标签。
(ps:其实与其说是html与xhtml的区别到不如说是有无XHTML 1.0 transitional doctype的区别,但是如果你把页面的XHTML 1.0 transitional doctype去掉的话,那么这个页面就没有doctype,默认的显示方式就是html4.01,不过你要把XHTML 1.0 transitional doctype修改成HTML 4.01 doctype同样页面定义body也不会有效果的,虽然这个页面的标准是html 4.01)
2、xhtml下frame页面横向滚动条的问题
在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷。
对于这个bug一般有3种解决方案,
方法1:
代码:
html { overflow-y: scroll; }
原理:强制显示ie的垂直滚动条,而忽略水平滚动条。
优点:完全解决了这个问题, 允许你保持完整的XHTML doctype 。
缺点:即使页面不需要垂直滚动条的时候也会出现垂直滚动条。
方法2:
代码:
html { overflow-x: hidden; overflow-y: auto; }
原理:隐藏横向滚动,垂直滚动根据内容自适应。
优点:在视觉上解决了这个问题。在不必要的时候,未强制垂直滚动条出现。
缺点:只是隐藏了水平滚动条,如果页面真正需要水平滚动条的时候,屏幕以外的内容会因为用户无法水平滚动,而看不到。
方法3:
代码:
body { margin-right: -15px; margin-bottom: -15px; }
原理:这会在margin的水平和垂直方向上添加一个负值,IE添加了该精确数值后,便会去除对滚动条的需求假象。
优点:在视觉上解决了这个问题,垂直滚动根据内容自适应。
缺点:由于“人为创建”了15px的外边距(margin),所以无法使用该填充过的屏幕区域。
SCROLLBAR-FACE-COLOR: 颜色代码; SCROLLBAR-HIGHLIGHT-COLOR:颜色代码; SCROLLBAR-SHADOW-COLOR: 颜色代码; SCROLLBAR-3DLIGHT-COLOR: 颜色代码; SCROLLBAR-ARROW-COLOR: 颜色代码; SCROLLBAR-TRACK-COLOR: 颜色代码; SCROLLBAR-DARKSHADOW-COLOR: 颜色代码;
大家是不是看到这么多属性有点点头大了?哈哈,放心,看一下我刚才提及的被我放大了一倍的图解你们就会感觉好多了:
这里的图片上还有一个scrollbar-base-color的属性,其实这个属性是个上面7个属性的总合,怎么说呢?就是当你设定了这个属性的颜色后,
前面的7个属性都可以不用设置了,滚动条会自动帮你设定的,只是这个设定都会基于你设定的scrollbar-base-color的颜色而自动设定
这个属性的优点就是不用大家费尽心思的去研究各个地方的颜色,但是缺点就是不能够融和五颜六色于一体。。
注:设定了scrollbar-base-color就不要设定其他七个属性了,设定了其他七个属性就不要设定scrollbar-base-color,不然之间可能会有冲突,会有一些效果不起作用的
最后,还是考虑到大家可能会喜欢我的美化代码[真臭美~],我把我的美化代码贴出来:
SCROLLBAR-FACE-COLOR: #CCFFFF; SCROLLBAR-HIGHLIGHT-COLOR: white; SCROLLBAR-SHADOW-COLOR: #813533; SCROLLBAR-3DLIGHT-COLOR: #813533; SCROLLBAR-ARROW-COLOR: #813533; SCROLLBAR-TRACK-COLOR: white; SCROLLBAR-DARKSHADOW-COLOR: #813533;
以上代码本人是加在body{}中的
更多HTML中的滚动条和去掉滚动条问题分析相关文章请关注PHP中文网!