一、 针对浏览器的选择器
  这些选择器在你需要针对某款浏览器进行css设计时将非常有用.
  IE6及其更低版本,本文由52CSS.com整理,转载请注明出处!
  * 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 {}
  要使用这些选择器,请将它们放在样式之前. 例如:
Example Source Code
#content-box {
width: 300px;
height: 150px;
}
Example Source Code
* html #content-box {
width: 250px;
}
二、让IE6支持PNG透明
  一个IE6的Bug引起了大麻烦, 他不支持透明的PNG图片。
  你需要使用一个css滤镜
Example Source Code
*html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png", sizingMethod="scale");
}
三、移除超链接的虚线
  FireFox下,当你点击一个超链接时会在外围出现一个虚线轮廓. 这很容易解决, 只需要在标签样式中加入:本文由52CSS.com整理,转载请注明出处!
Example Source Code
outline:none.
a{
outline: none;
}
四、给行内元素定义宽度
 
 如果你给一个行内元素定义宽度,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素. 行内元素包括:
<span>, <a>, <strong> 和 <em>. 块元素包括<div>,
<p>, <h1>, <form>和<li> . 你不能定义行内元素的宽度,
为了解决这个问题你可以将行内元素转变为块元素.
Example Source Code
span { width: 150px; display: block }
五、让固定宽度的页面居中
  为了让页面在浏览器居中显示, 需要相对定位外层div, 然后把margin设置为auto.
Example Source Code
#wrapper {
margin: auto;
position: relative;
}
六、IE6双倍边距的bug
 
七、Box Model 盒模型bug的一般解决办法
 
八、两个层之间的3px间隙
九、在IE中的HTML注释引起文字奇怪的复制
十、图片替换技术
  用文字总比用图片做标题好一些. 文字对屏幕阅读机和SEO都是非常友好的.
Example Source Code
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,然后看看头部会是什么样子的.本文由52CSS.com整理,转载请注明出处!
十一、 最小宽度
  IE6另外一个bug就是它不支持 min-width 属性. min-width又是相当有用的, 特别是对于弹性模板来说, 它们有一个100%的宽度,min-width 可以告诉浏览器何时就不要再压缩宽度了.
除IE6以外所有的浏览器你只需要一个 min-width: Xpx; 例如:
Example Source Code
.container {
min-width:300px;
}
  为了让他在IE6下工作, 我们需要一些额外的工作. 开始的时候我们需要创建两个div, 一个包含另一个:
Example Source Code
<div class="container">
<div class="holder">Content</div>
</div>
  然后你需要定义外层div的min-width属性,本文由52CSS.com整理,转载请注明出处!
Example Source Code
.container {
min-width:300px;
}
这时该是IE hack大显身手的时候了. 你需要包含如下的代码:
Example Source Code
* 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 .
Example Source Code
body { overflow-x: hidden; }
  当你决定使用一个比浏览器窗口大的图片或者flash时, 这个技巧将非常有用

12种CSS BUG解决方法与技巧的更多相关文章

  1. 百度编辑器ueditor 异步加载时,初始化没办法赋值bug解决方法

    百度编辑器ueditor 异步加载时,初始化没办法赋值bug解决方法 金刚 前端 ueditor 初始化 因项目中使用了百度编辑器——ueditor.整体来说性能还不错. 发现问题 我在做一个编辑页面 ...

  2. 针对IE浏览器里面CSS的Bug解决方法

    IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是 ...

  3. css重点知识和bug解决方法

    1.图片向下撑大3像素问题 在一个盒子里面放一张图片,默认情况下,图片会向下撑大3像素,有以下几种解决方法: 1.1 给图片添加display:block: 1.2 给图片添加 float:left: ...

  4. css 重点知识 和 bug 解决方法

    1.图片向下撑大3像素问题 在一个盒子里面放一张图片,默认情况下,图片会向下撑大3像素,有以下几种解决方法: 1.1 给图片添加display:block: 1.2 给图片添加 float:left: ...

  5. 浏览器css bug及bug解决方法

    Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...

  6. 12月中旬项目中出现的几个bug解决方法的思考

    这周做的项目遇到2个费了很多时间才解决的bug,解决之后,发现根本问题并不是什么很难的技术难点,都是因为自己在写代码的过程中,思维不够清晰.还有一个需要再提高的地方就是解决问题的思维,如何快速定位到问 ...

  7. 项目总结---- imageLoder 的2个Bug解决方法、1.9.4如何选择性删除disk缓存和其它一些错误。

    我们不说废话,直接入主题,抓紧时间写完,好继续找bug... (PS:imageLoder的bug 百度不到的哦,不过我坚信我的观点没错) 版本1.9.2,1.9.4我没测试 1,imageLoder ...

  8. 关于EasyUI 1.5版Datagrid组件在空数据时无法显示"空记录"提示的BUG解决方法

    问题:jQuery easyUI中Datagrid,在表格数据加载无数据的时候,如何显示"无记录"的提示语? 解决jQuery EasyUI 1.5.1版本的Datagrid,在处 ...

  9. CSS兼容性解决方法!important的IE7,Firefox问题

    转自:http://www.codesky.net/article/201008/139903.html 1. 首先谈谈!important问题的引起(盒模型问题): 在CSS标准中,一个盒模型包括4 ...

随机推荐

  1. Side effect (computer science)

    In computer science, a function or expression is said to have a side effect if it modifies some stat ...

  2. why updating the Real DOM is slow, what is Virtaul DOM, and how updating Virtual DOM increase the performance?

    个人翻译: Updating a DOM is not slow, it is just like updating any JavaScript object; then what exactly ...

  3. 【XSY2892】【GDSOI2018】谁是冠军

    题目来源:noi2018模拟测试赛(二十三)T3 san 为什么noi模拟赛里会做到省选原题啊…… 题意: Description 有n个人,简单起见把他们编号为1到n,每个人有三项指标分别是攻击力, ...

  4. laravel save() 返回 null

    原因:引用其他方法时,没有 return save()的操作结果. 在使用save()方法时,发现返回值是:null:

  5. JS中的异步

    Hello,日常更新的我“浪”回来了!!! JS中有三座高山:异步和单线程.作用域和闭包.原型原型链 今天“浪”的主题是JS中的异步和单线程的问题. 主要从这三个方面入手 一.什么是异步(与同步作比较 ...

  6. ArchLinux出现ACPI ERROR的解决方法

    ArchLinux关机.重启时出现ACPI错误: ACPI Error:Method parse/execution failed \_SB.PCI0.PGON,AE_AML_LOOP_TIMEOUT ...

  7. Vue 做项目经验

    Vue 做项目经验 首先需要知道最基本的东西是: Vue 项目打包:npm run build Vue生成在网页上看的端口:npm run dev 修改端口号的地方在: config文件夹下index ...

  8. 表单标签 fieldset legent

    书写表单时可以提供简单样式的标签 <fieldset> <legent></legent> <input type="text" > ...

  9. Java基础学习总结(58)——JAVA堆、栈详解

    关于堆栈的内容网上已经有很多资料了,这是我找的加上自己理解的一篇说明文: 一.内存区域类型 1.寄存器:最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制: 1. 栈:存放基本类型的变量数 ...

  10. Nginx监控

    http://www.ttlsa.com/nginx/nginx-status-detail/ http://blog.csdn.net/bobpen/article/details/53431699 ...