专注优质Wordpress企业网站搭建与优化

柳影花阴:八条实用的 CSS hack 技术(下)



八条实用的 CSS hack 技术

原文地址:CSS Hacks & Issues

翻译整理:西米CC

CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器解析CSS没有达成一致前,我们只能用这样的方法来完成任务,本文阐述了八条我们发现的在用CSS设计中有用的解决方案。

5.使一个固定宽度的网站居中

为了让我们的网站在浏览器中居中,可以为最外层Div添加position:relative属性,然后将margin设为auto:

  1. #wrapper {
  2. margin: auto;
  3. position: relative;
  4. }

6.图片替换技术

对于头部来说,永远是最好用文字而不是图片,在你必须要用图片的某个特殊地方最好使用隐藏文字的层的背景图片。这对于屏幕阅读和SEO非常有用,尽管依然使用很普通的文字,这可以联想到所有的优点:

  1. <style>
  2. h1 {
  3. background: url(heading-image.gif) no-repeat;
  4. }
  5. h1 span {
  6. position:absolute;
  7. [color=Maroon]text-indent: -5000px;</font>
  8. }
  9. </style>
  10. <h1><span>Main heading one</span></h1>

我们对H1标签使用普通的HTML代码,用CSS来将图片替代文字。Text-indent把文字放到左边5000像素处,从而用户看不到它们。实现这种图文置换的方法还有很多,具体可以参考本站的图像替换文本技术

7.在IE6.0中实现最小宽度

IE的另外一个Bug就是它不支持min-width属性。min-width确实非常有用,特别是对于100%宽度的可变模板来说,因为它告诉浏览器停止收缩。

对于除IE6以外的所有浏览器来说你只需min-width:xpx,例如:

  1. .container {
  2. min-width:300px;
  3. }

要让这些在IE6下起作用的话就需要一些额外的工作,我们需要创建两个DIV,一个包含着另一个:

  1. <div class="container">
  2. <div class="holder">Content</div>
  3. </div>

然后设置外层的min-width:

  1. .container {
  2. min-width:300px;
  3. }

现在又要IE hack起作用了,我们需要写下以下代码:

  1. * html .container {
  2. border-right: 300px solid #FFF;
  3. }
  4. * html .holder {
  5. display: inline-block;
  6. position: relative;
  7. margin-right: -300px;
  8. }

当浏览器窗口调整外层宽度来适应直到它缩小到border的宽度时,这个时候它就不能够在缩小了。而holder层也会停止收缩,外层的边框宽度变成了内层的最小宽度。

8.隐藏水平滚动

要去除水平滚动条,可以在body中插入overflow-x:hidden属性:

  1. body {
  2. overflow-x: hidden;
  3. }

这在我们决意要用一个比浏览器宽的图片或Flash时很有用。

[ 以下内容您也可能感兴趣 ]

Add a Comment