常用的兼容IE6及小技巧
为什么会出现浏览器兼容问题
由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重和,这就为各种莫名其妙的Bug(代码错误)提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒,都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。
关于浏览器
主流浏览器
浏览器 | 中文名 | 内核 |
---|---|---|
Internet Explorer | IE浏览器 | 内核: Trident |
Safari | 苹果浏览器 | webkit |
Google Chrome | 谷歌浏览器 | blink |
Mozilla Firefox | 火狐浏览器 | Gecko |
opera | 欧朋 | prsto |
常见Bug及解决方案
如何在IE6及更早的浏览器中定义小高度的容器 |
---|
IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高 |
hack:
#test{overflow:hidden;height:1px;font-size:0;line-height:0;}
如何在IE6及更早的浏览器产生双编剧的Bug |
---|
当IE6及更早浏览器出现浮动后margin值解析为双倍的情况,设置该元素的display属性为inline即可 |
#test{display:inline;}
如何在IE6及更早的浏览器模拟min-height效果 |
---|
注意此时#test不能再设置overflow的值为hidden,否则模拟min-height效果将失效 |
#test{min-height:100px;_height:100px;}
如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题? |
---|
input,button{overflow:visible |
如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题?如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时,li之间产生的空白间隙的BUG? |
---|
input,button{overflow:visibleli{vertical-align:top;} |
除了top值,还可以设置为text-top/middle/bottom /text-bottom |
如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题? |
---|
input,button{overflow:visible;} |
经验和技巧
1.如何清除图片下方出现几像素的空白间隙?
方法1:
img{display:block;}
方法2:
img{vertical-align:top;}
2.如何让文本垂直对齐文本输入框?
方法:
input{vertical-align:middle;}
3.如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果?
方法:
a:link{color:#03c;}
a:visited{color:#666;}
a:hover{color:#f30;}
a:active{color:#c30;}
4.如何使文本溢出边界显示为省略号?
方法:
test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
5.如何使连续的长字符串自动换行?
方法:
test{width:150px;word-wrap:break-word;}
6.如何让未知尺寸的图片在已知宽高的容器内水平垂直居中?
方法:
test{display:table-cell;display:block;position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
test p{position:absolute;top:50%;left:50%;margin:0;}
test p img{position:relative;top:-50%;left:-50%;vertical-align:middle;}
说明:#test是img的祖父节点,p是img的父节点。Know More:未知尺寸的图片如何水平垂直居中
7.如何去掉超链接的虚线框?
方法:
a{outline:none;}
8.为什么2个相邻div的margin只有1个生效?
.box1{margin:10px 0;}
.box2{margin:20px 0;}<div class="box1">box1</div>
<div class="box2">box2</div>
本例中box1的底部margin为10px,box2的顶部margin为20px,但表现在页面上2者之间的间隔为20px,而不是预想中的10+20px=30px,结果是选择2者之间最大的那个margin,我们把这种机制称之为“外边距合并”;外边距合并不仅仅出现在相邻的元素间,父子间同样会出现。
简单列举几点注意事项:
外边距合并只出现在块级元素上;
浮动元素不会和相邻的元素产生外边距合并;
绝对定位元素不会和相邻的元素产生外边距合并;
内联块级元素间不会产生外边距合并;
根元素间不会不会产生外边距合并(如html与body间);
设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并;
9.如何在文本框中禁用中文输入法?
方法:
input,textarea{ime-mode:disabled;}
ime-mode为非标准属性,写该文档时只有IE和Firefox支持
常用的兼容IE6及小技巧相关推荐
- excel删除空行_办公中常用的6个Excel小技巧,不会你就OUT了!
原标题:办公中常用的6个Excel小技巧,不会你就OUT了! 今天小编给大家分享几个EXCEL办公中比较常用的小技巧,赶紧跟我一起来学习下吧! 01 将所有数据上调 在某些情况下,我们希望将表格中所有 ...
- excel 行高 上下留白_拒绝加班,工作中最常用的57个Excel小技巧来了!
今天高顿君分享的 Excel小技巧,全是工作是最常用且简单易操作的,共57个,希望对同学们有所帮助.(适合版本 Excel2007及以上) 一.文件操作 1.为excel文件添加打开密码 文件 - 信 ...
- 计算机exce常用功能,电脑办公实用小技巧
原标题:电脑办公实用小技巧 干货推荐--电脑实用小技巧 宅家这么多天,似乎我们交流的方式大多数是通过网络进行的,所以一些电脑操作的小技巧也是必不可少的哦! 今天我们简单的为大家介绍一些小技能,大家可以 ...
- 超实用!SKETCH大师最常用的3个实战小技巧
编者按:面对Sketch这样的新应用,谁都想直接达到到高效.高产.熟练的使用水平.所以今天@窒息红Leon 就来介绍关于 Sketch 的三个小诀窍,而它们通常只能在经验丰富的 Sketch 大师身上 ...
- 【SpringBoot 2】(七)请求处理——映射 常用注解 方法参数的小技巧
写在前面
- 自己常用的C/C++小技巧
这里列出了自己常用的一些c/c++小技巧, 有些会有不足, 可以简单探讨一下. 32位/64位等 分类 分类: 小技巧 同理可以用于其他位, 比如16位什么的. 由于不同位的平台指针的大小可能是不同的 ...
- 怎样快速掌握WORD的常用功能,看这里就够了,常见的一些word使用小技巧
软件的使用,比如word,word强大的文档处理能力,让word的使用频率大大增加,现在我将介绍几种word中常用的几种使用小技巧. 快速查找某些关键字所在位置. (1)第一步打开word文档,按下[ ...
- UI界面如何制作?这些版式设计小技巧收藏好!
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 UI界面如何制作?这些版式设计小技巧收藏好!在做UI界面的时候,很多时候我们需要去看很多的产品进行竞品分析.市场调研 ...
- web开发常用js功能性小技巧(转)
web开发常用js功能性小技巧 -------------------------------------------------------------------------------- < ...
最新文章
- windows时间同步命令
- poj - 1651 Multiplication Puzzle
- android10获取imei,Android 10 root用户获取imei
- GDB中应该知道的几个调试方法-转
- SpringMVC4+Hibernate4运行报错Could not obtain transaction-synchronized Session for current thread...
- Neo4j 的一些使用心得
- Atitit spring cache key的生成 与ken生成规范 1. Good key name meth.params	1 1.1. Use epl 的mode but only clss
- java学习笔记day14—HTML
- 图片占内存容量计算公式
- 《封神演义》中的阐截二教之争 zz
- 怎么使用quicktime
- 【参赛作品94】21天openGauss学习之旅
- 在绩效评估中使用 360 反馈
- 第三章总体均数的估计与假设检验(2)
- java正则匹配ip_正则表达式匹配ip地址
- Fuchsia OS简介
- CPU 与 GPU 渲染:如何选择及原因?
- 《Generating Question Relevant Captions to Aid Visual Question Answering》(生成问题相关标题,以帮助视觉回答问题)论文解读
- 基金申请:关键科学问题,不是科学问题
- python数字转英文_python:将数字转换成用英文表达的程序
热门文章
- 每日英语--Week15
- 利用python-opencv读取视频,计算视频总帧数以及FPS
- liblinear java_LibLinear(SVM包)使用说明之(三)实践
- 全省排名10000计算机专业,高考理科600分,全省一万名左右,可以选择这4所211高校...
- python:实现YouTube下载(附完整源码)
- es5如何实现promise_浅谈promise用es5实现
- DatePicker和TimePicker
- java服务器生成随机数_java生成随机数
- Harris 角点检测
- 记一次拆机、装机的过程