《
5个常遇到的css hack 及解决办法》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302331392013.htm
--> [
网站建设之]5个常碰到的css hack 及解决措施
总结了5个常遇到的 css hack，列出来作为备忘。
一. 移除超链接的虚线(仅对FF有效)
FireFox下,当你点击一个超链接时会在外围涌现一个虚线轮廓. 这很轻易解决, 只要要在标签款式中加入 outline:none .
a{
outline: none;
}
二. 给行内元素定义宽度
假如你给一个行内元素定义宽度,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素. 行内元素包括: <span>, <a>, <strong> 跟 <em>. 块元素包含<div>, <p>, <h1>, <form>和<li> . 你不能定义行内元素的宽度, 为懂得决这个问题你可以将行内元素改变为块元素.
span { width: 150px; display: block }
三. 让固定宽度的页面居中
为了让页面在浏览器居中显示, 须要绝对定位外层div, 然后把margin设置为auto.
#wrapper {
margin: auto;
position: relative;
}
四. 图片替代技巧
用文字总比用图片做标题好一些. 文字对屏幕浏览机和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>作为标签并且用css来将文本调换为图片. text-indent属性将文字推到了阅读器左边5000px处, 这样对浏览者来说就看不见了.
关掉css,而后看看头部会是什么样子的.
五. 最小宽度
IE6另外一个bug就是它不支撑 min-width 属性. min-width又是相称有用的, 特殊是对于弹性模板来说, 它们有一个100%的宽度,min-width 可以告知浏览器何时就不要再紧缩宽度了.
除IE6以外所有的浏览器你只需要一个 min-width: Xpx; 例如:
.container {
min-width:300px;
}
为了让他在IE6下工作, 我们需要一些额定的工作. 开端的时候我们需要创立两个div, 一个包括另一个:
<div class="container">
<div class="holder">Content</div>
</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;
}
As the browser window is resized the outer div width reduces to suit until it shrinks to the border width, at which point it will not shrink any further. The holder div follows suit and also stops shrinking. The outer div border width becomes the minimum width of the inner div.
六. 暗藏程度转动条
为了防止呈现水平滚动条, 在body里参加 overflow-x:hidden .
body { overflow-x: hidden; }
当你决议使用一个比浏览器窗口大的图片或者flash时, 这个技能将无比有用. Tag：hack hack
相关的主题文章：
(责任编辑：网站建设)
5个常遇到的css hack 及解决办法相关文章