编辑“CSS之修复浏览器漏洞”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[WordPress设计方面的疑难解答|上一页]] | {{Template:WordPress导航}}</span>
<div style="clear:both;"></div>
人们常常忘记这样一个事实：[[互联网]]和[[网页]]都是最近几十年才出现的新事物，仍然在不断的发展和完善中。一般来说，新技术总是伴随着问题的。

互联网浏览器，比如[[Microsoft]]的[[IE]]浏览器、[[Netscape]]以及[[Firefox]]等，读取并解析网页代码，然后将一个美观大方的可视界面显示在[[浏览器]]窗口中。负责指示浏览器显示页面样式的代码就叫做样式代码，也就是人们常说的层叠样式表单（[http://www.wordpress.la/codex-CSS.html CSS]）。虽然很多网页标准和规范对网站的样式和布局代码的规定大同小异，但不是所有浏览器都能在显示某个相同页面时获得相同的显示效果。

为了紧跟网页开发设计的发展脚步，也为了应对不同互联网[[浏览器]]带来的问题，下面我们介绍一些资料，帮助大家更好地了解怎样利用[[CSS]]进行网页设计以及怎样解决网页设计时遇到的问题。

==互联网标准==
下面的网站面向网页设计的最新技术，分别规定了网页开发设计的标准。
*[http://www.w3c.org/ World Wide Web   Consortium Organization (W3C)]
*[http://www.w3.org/StyleSheets/Core/ Using W3C Core Styles for CSS   templates]
*[http://www.w3.org/tr/rec-css2/ W3C's Cascading Style Sheets Level 2   Specification]
*[http://www.w3.org/TR/rec-css2/ W3C Recommendations for CSS2]
*[http://www.webstandards.org/ Web Standards Organization]

==了解不同浏览器的差异==

了解各个浏览器的运行机制以及浏览器支持的CSS功能，以更快地判断样式出错原因。

*[http://centricle.com/ref/css/filters/ Will the browser apply the   rule(s)?]
*[http://dithered.com/css_filters/css_only/ CSS-only Filters Summary]

==浏览器BUG和修改==
在各种标准成为统一的规范前，网页设计人员设计网页时不得不考虑到各个浏览器之间的差异以及[[浏览器]]处理代码方式上的差异。而如今，只有很少一部分网页设计人员会考虑到旧式浏览器，大多数人都已经掌握了最新技术并更新了相应的网络软件。但即使到了现在，世界上使用人数最多的浏览器——Microsoft的[[Internet]]   Explorer（[[IE]]）浏览器仍然存在着一些bug，不过相应的解决方案也已经出台。

[[IE]]浏览器处理网页页边距和留白部分的方式异于其它浏览器和互联网标准规定。这导致一个牵涉了文字、文本框、列表与图片的bug。在页面上看不到正文内容，将页面拉到底端时，正文文字会突然出现，又突然消失，这也是一个bug。还有个bug使图片和图片容器相覆盖。下面的链接是一些相关bug的修复方案：

*[http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41 Box   Model Hack and feeding different IEs different css]
*[http://www.positioniseverything.net/explorer.html Position is Everything:   Explorer Exposed]
*[http://www.positioniseverything.net/explorer/floatIndent.html Floats,   Margins and IE]
*[http://css.nu/pointers/bugs.html CSS Bugs and Workarounds]
*[http://www.richinstyle.com/bugs/ Richinstyle's Bugs]
*[http://www.digital-web.com/features/feature_2003-02.shtml Toward A More   Standards Compliant Internet Explorer]
*[http://css-discuss.incutio.com/?page=CssHack CSS-Discuss Group's CSS   Hacks]
*[http://www.ericmeyeroncss.com/bonus/trick-hide.html Eric Meyers On CSS -   Tricking Browsers and Hiding Styles]
*[http://www.quirksmode.org/ QuirksMode- Browser Quirks]
*[http://www.howtocreate.co.uk/wrongWithIE/ No, Internet Explorer did not   handle it properly]
*[http://www.l-c-n.com/IE5tests/ Internet Explorer 5 Mac: oddities] 

==文字方向==
对语言的使用也可能扰乱网页布局。国际上其它国家互联网用户的增长速度也开始超过美国、加拿大和欧洲。随着越来越多不同国家的用户涌入[[互联网]]，网页开发人员开始考虑网页在其它语言的计算机和浏览器上的效果，尤其是有些语言的书写、阅读顺序是从右向左的。在国际化的背景下，网页开发人员需要格外关注<A href="http://www.w3.org/TR/REC-html40/struct/dirlang.html 互联网的网络统一标准]。

老式[[操作系统]]和浏览器无法识别从右向左语言的页面代码样式，使页面强制形成一个右对齐的空白部分，最后打乱页面样式。

从右向左书写方式的语言包括希伯来语和阿拉伯语，这两种语言的互联网用户都以极快的速度增加着。

有些方法可以改变计算机操作系统的文字方向，保护[[网页]]布局不被打乱。首先，[[Windows]]   XP等较新的操作系统加强了对页面和英语的解析能力。其次，可以通过HTML编码技术在新型浏览器上调整文字方向。老式浏览器忽略了HTML代码，页面文本呈右对齐显示，图形杂乱地散落在页面上，虽然页面不够整洁美观，但仍然有一定的辨识度。及时更新浏览器和[[操作系统]]，尽量简化[[HTML]]样式，能够在一定程度上避免问题出现。

要调整文字方向和页面样式以符合美式英语习惯，可以在[[HTML]]标签中加入以下代码：
<PRE>&lt;html dir="ltr" lang="en-US"&gt;  </PRE>

下面是一些将英语语言调整为其他地区英语的代码：
*英语 - 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, h1, 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}  

<STRONG>从右向左式语言相关资料和链接</STRONG>

*[http://www.w3.org/International/questions/ W3C Web Internationalization   FAQs]
*[http://www.w3.org/TR/2002/WD-xhtml2-20020805/mod-bidi.html W3c's XHTML   Bi-directional Text Module]
*[http://www.w3.org/TR/REC-html40/struct/dirlang.html W3c's Language   Information and Text Direction]
*[http://www.w3.org/International/O-HTML-tags.html W3C's   Internationalization Language tagging in HTML and XML]
*[http://www.unicode-conference.org/IUC-history.html Unicode-Conference.Org's   Conference Papers and Keynote Speakers on International Standards]
*[http://www.webdesigntalk.net/html40/struct/dirlang.html Web Design Talk's   Language Information and Text Direction]
*[http://jamesthornton.com/html/4.01/struct/global.html The Global   Structure of an HTML Document]
*[http://www.microsoft.com/globaldev/handson/dev/Mideast.mspx Authoring   HTML for Middle Eastern Content]
*[http://www.unicode.org/iuc/iuc20/a011.html Unicode's Weaving the   Multilingual Web: Standards and Their Implementations]
*[http://www.idealliance.org/papers/dx_xml03/papers/03-06-02/03-06-02.html Internationalization   of XML - Past, Present, Future]
*[http://www.richinstyle.com/guides/language2.html RichinStyle's CSS2   Tutorial - Language Styles] 

==更多CSS和浏览器相关资料==
下面的资料能帮我们更好地了解不同的[[浏览器]]如何解析[[CSS]]和[[HTML]]：

*[http://gallery.theopalgroup.com/selectoracle/ Selectoracle - Explains   Complex CSS Selectors on Your Site]
*[http://archive.devx.com/projectcool/developer/reference/css_style.html CSS   Style Sheet Browser Support by Selector]
*[http://css.nu/pointers/ Cascading   Style Sheet Pointers]
*[http://wdvl.com/Authoring/Style/Sheets/Fonts/font.html Putting Style   Sheets in Perspective: Abbreviating CSS Code]
*[http://www.blooberry.com/html/style/styleindex.htm Cascading Style Sheet   Guide]
*[http://www.codeave.com/css/ Code   Ave's CSS Resources]
*[http://www.codestyle.org/css/ Codestyle.org's CSS Style Guide]
*[http://www.css.nu/ CSS Pointers - List of   Dangerous and Safe CSS properties]
*[http://www.jessett.com/web_sites/css/css_style_properties.shtml Jessett's   CSS Style Properties Guide]
*[http://www.meyerweb.com/eric/css/references/css2ref.html CSS 2 Framed   References for Easy Code Research ]
*[http://www.mezzoblue.com/css/cribsheet/ CSS Crib Sheet]
*[http://www.nypl.org/styleguide/css/ NYPL Online CSS Style Guide]
*[http://www.ssam03.com/webdesign/cssref.php Web Design: CSS Quick   Reference - Syntax]
*[http://www.webreference.com/authoring/style/sheets/syntax.html Syntax and   Hierarchy of CSS Styles]
*[http://www.economist.com/research/styleGuide/ Economist's Style Guide]
*[http://www.designbyfire.com/000094.html Design Eye for the Usability   Guy]
*[http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html Checkpoints for   Web Accessibility Guidelines]

==相关条目==
*[[Drupal]] 
*[[OBLOG]] 
*[[X-Space]] 
*[[SaBlog-X]] 
*[[Bo-Blog]]

[[category:WordPress中文文档|C]]
[[category:WordPress网站开发|C]]
[[category:WordPress开发文档|C]]