1、说明本文阐述了8条我们发现的在用CSS设计中有用的解决方案。 2、浏览器特定的选择器 这是Solid State Group网站上的一篇很友好的文章,解决了在设计中遇到的很多问题,故在此翻译其文,并对原作者表示非常感谢! 当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很 如果你对一个inline元素使用宽度,它将只在IE6下起作用。 所以的HTML标签要么是Block的要么就是inline的。inline属性的标签有<span><a><strong>和<em>Block标签包括<div><p><h1><form>和<li> 你不能控制inilne标签的宽带,不过有一个方法是把标签属性从inline改为Block。 应用display:block能够把span标签变成block标签,从而控制它的宽度。 6、使一个固定宽度的网站居中。 为了让你的网站在浏览器中居中,可以为最外层Div添加position:relative属性,然后将margin设为auto。 7、图片替换技术 对于头部来说,永远是最好用文字而不是图片。在你必须要用图片的某个特殊地方最好使用隐藏文字的层的背景图片。这对于屏幕阅读和SEO非常有用,尽管依然使用很普通的文字,这可以联想到所有的优点。 正如你所见,我们对H1标签使用普通的HTML代码,用CSS来将图片替代文字。Text-indent把文字放到左边5000像素处,从而用户看不到它们。 8、最小宽度 IE的另外一个Bug就是它不支持min-width属性。min-width确实非常有用,特别是对于100%宽度的可变模板来说,因为他告诉浏览器停止收缩。 对于除IE6以外的所有浏览器来说你只需min-width:xpx;例如: 要让这些在IE6下起作用的话你要添加额外的努力!你需要创建两个DIV,一个包含着另一个。 然后你需要设置外面层的min-width: 现在又要IE hack起作用了,你需要写下以下代码: * html .container { border-right: 300px solid #FFF; } * html .holder { display: inline-block; position: relative; margin-right: -300px; }
当浏览器窗口调整外层宽度来适应直到它缩小到border的宽度时,这个时候它就不能够在缩小了。而holder层也会停止收缩。外层的边框宽度变成了内层的最小宽度。 9、隐藏水平滚动 要去除水平滚动条,可以在body中插入overflow-x:hidden属性。 body { overflow-x: hidden; }
这在你决意要用一个比浏览器款的图片或Flash时很有用。
|