1、说明本文阐述了8条我们发现的在用CSS设计中有用的解决方案。
2、浏览器特定的选择器
英文地址: http://www.solidstategroup.com/page/1592
当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。
IE6以下
*html{}
IE 7 以下
*:first-child+html {} * html {}
只对IE 7
*:first-child+html {}
只对IE 7 和现代浏览器
html>body {}
只对现代浏览器(非IE 7)
html>/**/body {}
最新的Opera 9以下版本
html:first-child {}
Safari
html[xmlns*=”"] body:last-child {}
要使用这些选择器,请在样式前写下这些代码。例如:
#content-box {
width: 300px;
height: 150px;
}
* html #content-box {
width: 250px;
}
/* 重写上面的代码并且把宽度改为250px
在IE6以下版本中适用。 */
3、在IE6中使用透明PNG图片
IE6的一个很难处理的BUG就是它不支持透明PNG图片。
你可能需要用一个重写的CSS的滤镜来解决这个问题:
*html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”filename.png”, sizingMethod=”scale”);
}
4、去掉连接虚线框
当你点击链接时,Firefox会在链接周围产生一个虚线外框。
点击在新窗口中浏览此图片
这个很好解决,只需在a标签中添加outline:none就可以了。
a{
outline:none;
}
5、对inline元素应用宽度。
如果你对一个inline元素使用宽度,它将只在IE6下起作用。
所以的HTML标签要么是Block的要么就是inline的。inline属性的标签有<span><a>< strong>和<em>Block标签包括<div><p><h1><form> 和<li>
你不能控制inilne标签的宽带,不过有一个方法是把标签属性从inline改为Block。
span{
width:150px;
display:block;
}
应用display:block能够把span标签变成block标签,从而控制它的宽度。
6、使一个固定宽度的网站居中。
为了让你的网站在浏览器中居中,可以为最外层Div添加position:relative属性,然后将margin设为auto。
#wrapper {
margin: auto;
position: relative;
}
7、图片替换技术
对于头部来说,永远是最好用文字而不是图片。在你必须要用图片的某个特殊地方最好使用隐藏文字的层的背景图片。这对于屏幕阅读和SEO非常有用,尽管依然使用很普通的文字,这可以联想到所有的优点。
HTML:
<h1><span>Main heading one</span></h1>
CSS:
h1 {
background: url(heading-image.gif) no-repeat;
}
h1 span {
position:absolute;
text-indent: -5000px;
}
正如你所见,我们对H1标签使用普通的HTML代码,用CSS来将图片替代文字。Text-indent把文字放到左边5000像素处,从而用户看不到它们
8、最小宽度
IE的另外一个Bug就是它不支持min-width属性。min-width确实非常有用,特别是对于100%宽度的可变模板来说,因为他告诉浏览器停止收缩。
对于除IE6以外的所有浏览器来说你只需min-width:xpx;例如:
.container {
min-width:300px;
}
要让这些在IE6下起作用的话你要添加额外的努力!你需要创建两个DIV,一个包含着另一个。
<div class=”container”>
<div class=”holder”>Content</div>
</div>
然后你需要设置外面层的min-width:
.container {
min-width:300px;
}
现在又要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;
}
分享到:
相关推荐
all css hacks 列表 支持目前主流游览器
我们是一个团队,为公告板 phpBB 编写了许多 hacks & mods
CSS 浏览器兼容性教程,需要的下载吧。
1. Getting Started with CSS ......................................................................... 1 2. Text Styling and Other Basics ..................................................................
《心理和脑与生活:训练脑与心智的75项窍门》能够帮助你排除混乱,让大脑有序地安全地高产地运用起来,训练方法是基于现有的研究进展和理论发展,但更多地提供的是富有实效的基于实践的解决方案,让你能够快速地运用...
The CSS Anthology: 101 Essential Tips, Tricks & Hacks is a compilation of best practice solutions to the most challenging CSS problems. The third edition of this best-selling book, published in full ...
CSS hacks利用浏览器的漏洞来隐藏特定浏览器的CSS规则
英文pdf版 计算机电子书下载,CSS标准并不提供一个方法去指定一个特定的浏览器版本,所以网络开发者社区开发了CSS filter(也被称作”CSS hacks”)。这些filter利用浏览器的问题或者未执行的特性来隐藏针对特殊...
(英文)The CSS Anthology: 101 Essential Tips, Tricks & Hacks 2009。SitePoint Pty Ltd出版。pdf格式。
Hacks shows you how to use, expand, personalize, and tweak Yahoo! in ways you never dreamed possible. You'll learn how to: <br>Fine-tune search queries with keyword shortcuts and advanced syntax ...
50 Android Hacks.pdf
我不再使用CSS Hacks了,相反的是,我将使用IE的条件判断将类应用到body标签。 但是,我想记录我之前碰到过的每一个浏览器特定的CSS 选择器和样式属性。我相信也没有其他方式提供样式表给独特的Safari. 利用这些...
If you are a developer, or system administrator, or database administrator, or IT manager, or just someone who spends a significant amount of time on UNIX / Linux, you should become ...
BSD hacks techniques
Spidering Hacks is about coming up with easier, more automated ways of performing everyday tasks and gathering information.
browserhacks, 一个广泛的css/browserhacks列表,来自互联网 Browserhacks.com这是什么?Browserhacks是一个广泛的浏览器特定...请记住,使用 hack 并非总是完美的解决方案。 修正一些奇怪的浏览器特定的Bug 是很有用的
bs-css-hacks, Bootstrap 工作的CSS bugs/quirks/incompatibilities的索引 bugs/quirks/incompatibilities的索引,的索引,它的工作范围为 ,如 v3.2.0.目标:确保在至少 1个 MDN的资源中提到了上述每个。因为普通...
当然 CSS Hacks 是最为流行的解决方案。但对于 IE 而言,目前已经有 IE6/IE7/IE8 三个主要版本,不久的将来还会有 IE9 的到来。于此,IE 是个杯具。 当然有很多人歇斯底里地诋毁 IE6,在此想说的是,一切诋毁 IE6 ...
Wireless Hacks: 100 Industrial-Strength Tips & Tools英文版
[奥莱理] Raspberry Pi Hacks (英文版) [奥莱理] Raspberry Pi Hacks Tips & Tools for Making Things with the Inexpensive Linux Computer (E-Book) ☆ 图书概要:☆ With more than 60 practical and creative...