CSS之修复浏览器漏洞
发布于
by
人们常常忘记这样一个事实：互联网和网页都是最近几十年才出现的新事物，仍然在不断的发展和完善中。一般来说，新技术…
人们常常忘记这样一个事实：互联网和网页都是最近几十年才出现的新事物，仍然在不断的发展和完善中。一般来说，新技术总是伴随着问题的。
互联网浏览器，比如Microsoft的IE浏览器、Netscape以及Firefox等，读取并解析网页代码，然后将一个美观大方的可视界面显示在浏览器窗口中。负责指示浏览器显示页面样式的代码就叫做样式代码，也就是人们常说的层叠样式表单（CSS）。虽然很多网页标准和规范对网站的样式和布局代码的规定大同小异，但不是所有浏览器都能在显示某个相同页面时获得相同的显示效果。
为了紧跟网页开发设计的发展脚步，也为了应对不同互联网浏览器带来的问题，下面我们介绍一些资料，帮助大家更好地了解怎样利用CSS进行网页设计以及怎样解决网页设计时遇到的问题。
互联网标准
下面的网站面向网页设计的最新技术，分别规定了网页开发设计的标准。
- World Wide Web Consortium Organization (W3C)
- Using W3C Core Styles for CSS templates
- W3C’s Cascading Style Sheets Level 2 Specification
- W3C Recommendations for CSS2
- Web Standards Organization
了解不同浏览器的差异
了解各个浏览器的运行机制以及浏览器支持的CSS功能，以更快地判断样式出错原因。
- Will the browser apply the rule(s)?
- CSS-only Filters Summary
浏览器BUG和修改
在各种标准成为统一的规范前，网页设计人员设计网页时不得不考虑到各个浏览器之间的差异以及浏览器处理代码方式上的差异。而如今，只有很少一部分网页设计人员会考虑到旧式浏览器，大多数人都已经掌握了最新技术并更新了相应的网络软件。但即使到了现在，世界上使用人数最多的浏览器——Microsoft的Internet Explorer（IE）浏览器仍然存在着一些bug，不过相应的解决方案也已经出台。
IE浏览器处理网页页边距和留白部分的方式异于其它浏览器和互联网标准规定。这导致一个牵涉了文字、文本框、列表与图片的bug。在页面上看不到正文内容，将页面拉到底端时，正文文字会突然出现，又突然消失，这也是一个bug。还有个bug使图片和图片容器相覆盖。下面的链接是一些相关bug的修复方案：
- Box Model Hack and feeding different IEs different css
- Position is Everything: Explorer Exposed
- Floats, Margins and IE
- CSS Bugs and Workarounds
- Richinstyle’s Bugs
- Toward A More Standards Compliant Internet Explorer
- CSS-Discuss Group’s CSS Hacks
- Eric Meyers On CSS – Tricking Browsers and Hiding Styles
- QuirksMode- Browser Quirks
- No, Internet Explorer did not handle it properly
- Internet Explorer 5 Mac: oddities
文字方向
对语言的使用也可能扰乱网页布局。国际上其它国家互联网用户的增长速度也开始超过美国、加拿大和欧洲。随着越来越多不同国家的用户涌入互联网，网页开发人员开始考虑网页在其它语言的计算机和浏览器上的效果，尤其是有些语言的书写、阅读顺序是从右向左的。在国际化的背景下，网页开发人员需要格外关注互联网的网络统一标准。
老式操作系统和浏览器无法识别从右向左语言的页面代码样式，使页面强制形成一个右对齐的空白部分，最后打乱页面样式。从右向左书写方式的语言包括希伯来语和阿拉伯语，这两种语言的互联网用户都以极快的速度增加着。
有些方法可以改变计算机操作系统的文字方向，保护网页布局不被打乱。首先，Windows XP等较新的操作系统加强了对页面和英语的解析能力。其次，可以通过HTML编码技术在新型浏览器上调整文字方向。老式浏览器忽略了HTML代码，页面文本呈右对齐显示，图形杂乱地散落在页面上，虽然页面不够整洁美观，但仍然有一定的辨识度。及时更新浏览器和操作系统，尽量简化HTML样式，能够在一定程度上避免问题出现。
要调整文字方向和页面样式以符合美式英语习惯，可以在HTML标签中加入以下代码：
<html dir="ltr" lang="en-US">
下面是一些将英语语言调整为其他地区英语的代码：
- 英语 – lang=”en”
- 美式英语 – lang=”en-US”
- 大不列颠英语 – lang=”en-GB”
- 伦敦英语 – lang- “en-cockney”
- 利物浦英语 – lang=”en-scouse”
- 澳大利亚英语- lang=”en-AU”
- 加拿大英语 – lang=”en-CA”
如果我们的网站有很多读者都是用从右向左式语言，为了照顾这些读者的阅读顺序，我们可以在样式表的HTML和BODY选择符中加入以下文字方向声明和双向代码，使文本内容能够以恰当的方式排列。代码的波及范围可能过大，但到现在为止没有出现不良影响，浏览器遇到其它语言时，夸张的代码保证了页面的稳定性。
html, body {direction:ltr}
/* begin bidirectionality */
bdo[dir=ltr] {direction:ltr; unicode-bidi:bidi-override}
bdo[dir=rtl] {direction:rtl; unicode-bidi:bidi-override}
*[dir=ltr] {direction:ltr; unicode-bidi:embed}
*[dir=rtl] {direction:rtl; unicode-bidi:embed}
/* block-level in msie4 */
address, blockquote, body, dd, div, dl, dt, fieldset,
form, frame, frameset, h2, h2, h3, h4, h5, h6, iframe,
noscript, noframes, object, ol, p, ul, applet, center,
dir, hr, menu, pre, li, table, tr, thead, tbody, tfoot,
col, colgroup, td, th, caption
{unicode-bidi:embed}
从右向左式语言相关资料和链接
- W3C Web Internationalization FAQs
- W3c’s XHTML Bi-directional Text Module
- W3c’s Language Information and Text Direction
- W3C’s Internationalization Language tagging in HTML and XML
- Unicode-Conference.Org’s Conference Papers and Keynote Speakers on International Standards
- Web Design Talk’s Language Information and Text Direction
- The Global Structure of an HTML Document
- Authoring HTML for Middle Eastern Content
- Unicode’s Weaving the Multilingual Web: Standards and Their Implementations
- Internationalization of XML – Past, Present, Future
- RichinStyle’s CSS2 Tutorial – Language Styles
更多CSS和浏览器相关资料
下面的资料能帮我们更好地了解不同的浏览器如何解析CSS和HTML：
- Selectoracle – Explains Complex CSS Selectors on Your Site
- CSS Style Sheet Browser Support by Selector
- Cascading Style Sheet Pointers
- Putting Style Sheets in Perspective: Abbreviating CSS Code
- Cascading Style Sheet Guide
- Code Ave’s CSS Resources
- Codestyle.org’s CSS Style Guide
- CSS Pointers – List of Dangerous and Safe CSS properties
- Jessett’s CSS Style Properties Guide
- CSS 2 Framed References for Easy Code Research
- CSS Crib Sheet
- NYPL Online CSS Style Guide
- Web Design: CSS Quick Reference – Syntax
- Syntax and Hierarchy of CSS Styles
- Economist’s Style Guide
- Design Eye for the Usability Guy
- Checkpoints for Web Accessibility Guidelines
分类：中文手册
类别：WordPress教程、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
还没有任何评论，赶紧来占个楼吧！