CSS bug是布局中最头疼的问题。我们需要兼顾各种浏览器,以期待获得一致的效果。非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6与IE7在很多问题上也存在着很大的差别。轻松的解决CSS bug是我们必须掌握的技能。现在整理出最常用的12种CSS BUG解决方法以及CSS BUG类的小技巧。
一、 针对浏览器的选择器这些选择器在你需要针对某款浏览器进行css设计时将非常有用.
* html {}
IE7及其更低版本
*:first-child+html {} * html {}
仅针对IE7
*:first-child+html {}
IE7和当代浏览器
html>body{}
仅当代浏览器(IE7不适用)
html>/**/body{}
Opera9及其更低版本
html:first-child {}
Safari
html[xmlns*=""] body:last-child {}
要使用这些选择器,请将它们放在样式之前. 例如:
#content-box {
width: 300px;
height: 150px;
}
www.52css.com]
* html #content-box {
width: 250px;
}
您也可以参考—CSS hacks:浏览器特定选择器介绍
http://www.52css.com/article.asp?id=635二、让IE6支持PNG透明一个IE6的Bug引起了大麻烦, 他不支持透明的PNG图片。
你需要使用一个css滤镜
.52css.com]
*html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png", sizingMethod="scale");
}
三、移除超链接的虚线
FireFox下,当你点击一个超链接时会在外围出现一个虚线轮廓. 这很容易解决, 只需要在标签样式中加入:本文由52CSS.com整理,转载请注明出处!.com]
outline:none.
a{
outline: none;
}
您也可以参考—除链接元素的虚线框(兼容IE7、IE6、FF)
http://www.52css.com/article.asp?id=743四、给行内元素定义宽度 如果你给一个行内元素定义宽度,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素. 行内元素包括: <span>, <a>, <strong> 和 <em>. 块元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定义行内元素的宽度, 为了解决这个问题你可以将行内元素转变为块元素.
span { width: 150px; display: block }
五、让固定宽度的页面居中为了让页面在浏览器居中显示, 需要相对定位外层div, 然后把margin设置为auto.
[www.52css.com]
#wrapper {
margin: auto;
position: relative;
}
六、IE6双倍边距的bug给此对象加上display:inline即可解决问题。具体介绍:
http://www.52css.com/article.asp?id=144七、Box Model 盒模型bug的一般解决办法这是一个臭名昭著的问题了,详情参考这里:
http://www.52css.com/article.asp?id=106八、两个层之间的3px间隙传说中的“IE 3px bug”,解决的办法:
http://www.52css.com/article.asp?id=146九、在IE中的HTML注释引起文字奇怪的复制Duplicate Characters Bug很神奇,具体的解决办法:
http://www.52css.com/article.asp?id=440十、图片替换技术用文字总比用图片做标题好一些. 文字对屏幕阅读机和SEO都是非常友好的.
<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处, 这样对于浏览者来说就看不见了.
十一、 最小宽度IE6另外一个bug就是它不支持 min-width 属性. min-width又是相当有用的, 特别是对于弹性模板来说, 它们有一个100%的宽度,min-width 可以告诉浏览器何时就不要再压缩宽度了.
除IE6以外所有的浏览器你只需要一个 min-width: Xpx; 例如:
.52css.com]
.container {
min-width:300px;
}
为了让他在IE6下工作, 我们需要一些额外的工作. 开始的时候我们需要创建两个div, 一个包含另一个:
.52css.com]
<div class="container">
<div class="holder">Content</div>
</div>
然后你需要定义外层div的min-width属性,本文由52CSS.com整理,转载请注明出处!
.52css.com]
.container {
min-width:300px;
}
这时该是IE hack大显身手的时候了. 你需要包含如下的代码:.52css.com]
* html .container {
border-right: 300px solid #FFF;
}
* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}
十二、隐藏水平滚动条为了避免出现水平滚动条, 在body里加入 overflow-x:hidden .
body { overflow-x: hidden; }
当你决定使用一个比浏览器窗口大的图片或者flash时, 这个技巧将非常有用.
相关推荐
现在整理出最常用的12种CSSBUG解决方法以及CSSBUG类的小技巧。希望对您的学习、工作有所帮助,如果您依然有疑问,欢迎您到jb51.net查阅、搜索相关内容。一、针对浏览器的选择器 这些选择器在你需要针对某款浏览器...
针对各种浏览器的各种cssbug与解决方法和技巧。
三、常用的CSS BUG解决方法与技巧 四、CSS常用的一些小技巧 五、firefox无法显示背景图片:解决方案 ASP.NET 一、 控件连接数据库 二. 从excel导入数据到数据库 比较 一、Web Application Projects和Web Site...
让你的CSS能兼容IE Firefox的一些技巧。解决IE一些诡异的Bug
CSS兼容IE和Firefox的技巧集合,很多常见的bug解决方案!
单列式与两列式页面布局的CSS技巧; ?三行两列式页面布局的CSS技巧; ?多列式CSS页面布局的实现; ?应用“反向浮动”将主要内容置于文档前面部分; ?应用无序列表ul构建水平横向菜单; ?应用无序列表ul制作多种...
div使用css的总结,很不错的吆 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 powered by 25175.net 2. ...
CSS技巧 1.div的垂直居中问题 vertical-align:middle;将行距增加到和整个DIV一样高 line-height:200px;然后插入文字,就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的...
从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-...
CSS-Notes 目录 CSS基础 09-Flex弹性布局 10-Grid网格布局 11-媒体查询 CSS进阶 专题总结-兼容性问题 专题总结-居中问题 ...bug解决 CSSTrick CSS3美化form控件 画个三角形 滚动视差 滚动条美化 hover显示的搜索框
这个也算正则表达式的用法,其实仔细看正则表达式应该比较简单,不过既然有这个问题提出,说明对正则表达式还得有个认识过程,解决方法如下 解决: 在替换对话框中,启用“正则表达式”复选框 在查找内容里面输入...
一个小技巧解决了这个问题。 使用方法应该很简单,去官网可以查看到方法。基本步骤如下 npm install vue-awesome-swiper --save-dev 在main.js中 import VueAwesomeSwiper from 'vue-awesome-swiper' import '...
在ASP.Net中两种利用CSS实现多界面的方法 如何在客户端调用服务端代码 页面一postback,它就显示页面的最顶端,怎样让它定位在某一位置? 如何保证页面刷新后的滚动条位置 清除网页历史记录,屏蔽后退按钮! 如何传值...
第14章 CSS与JavaScript 14.1 什么是CSS 14.2 什么是样式表 14.2.1 什么是兼容CSS的浏览器 14.2.2 样式表的工作原理 14.3 CSS程序结构 14.3.1 注释 14.3.2 组合 14.4 ...
该系统基于ASP+DIV+CSS+AJAX+XML+MSSQL技术开发的CMS网站管理系统,是一个经过完善设计并适用于各种服务器环境的易用、安全、高效、快速、优秀的网站解决方案。后台管理方便、易懂、易用、人性化,对操作人员技术...
4、网站模板与程序分离,支持多种标签调用,支持DIV CSS,通过模板设计便可实现个性化网站 精迅CMS实现了“网站模板与程序完全分离”的新概念,支持不同栏目、内容页应用不同的模板,模板制作也非常方便,用户...