浏览器的兼容问题2
来源：互联网 发布：网络骂人录音 编辑：程序博客网 时间：2024/05/18 02:32
11、IE6，7下面让两个块级元素在一行内显示 都用浮动
<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/.left{width:100px;height:100px;float:left;background:red;}.right{width:200px;height:100px;background:blue;float:left;/*margin-left:100px;*//*其他浏览器可以用margin 但是IE6 IE7达不到效果*/}</style></head><body><!--身体--><div class="box"><div class="left"></div><div class="right"></div></div><!--IE6，7下面让两个块级元素在一行内显示 都用浮动--></body></html>12、IE6下的文字溢出
当子元素的宽度和父元素的宽度相差小于3px的时候，两个浮动元素之间有注释或者行内元素的时候文字会自动溢出。
解决办法：用div把注释和行内元素包裹起来
<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/.box{width:400px;}.left{float:left;}.right{width:400px;float:right}</style></head><body><!--身体--><div class="box"><div class="left"></div><div><!--IE6下的文字溢出--><span></span><span></span><span></span></div><div class="right">最后一节课啦！同学们学的怎么样了呢？</div></div><!--IE6下的文字溢出子元素的宽度和父元素的宽度相差小于3px的时候，两个浮动元素之间有注释或者行内元素的时候解决办法：用div把注释和行内元素包裹起来--></body></html>13、IE6下，当浮动元素和绝对定位元素是并列关系的时候，绝对定位元素会消失
解决办法：给定位元素外面包一个div
<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/.box{width:200px;height:200px;border:1px solid #000;position:relative;}ul{width:150px; height:150px;background:red;float:left;margin:0 0 0 50px;}span{width:50px;height:50px;background:blue;position:absolute;right:-20px;top:0;}</style></head><body><!--身体--><div class="box"><ul></ul><div><span></span></div></div><!--IE6下，当浮动元素和绝对定位元素是并列关系的时候，绝对定位元素会消失解决办法：给定位元素外面包一个div--></body></html>14、IE6 7下，子元素有相对定位属性，父元素的overflow包不住子元素
解决办法：给父元素也添加相对定位属性
<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/.box{width:200px;height:200px;border:1px solid red;overflow:auto;position:relative;}.con{width:150px;height:300px;background:blue;position:relative;}</style></head><body><!--身体--><div class="box"><div class="con"></div></div><!--IE6 7下，子元素有相对定位属性，父元素的overflow包不住子元素解决办法：给父元素也添加相对定位属性--></body></html>15、IE6下，绝对定位的父元素的宽高为奇数的时候，元素的right和bottom值会有1px的偏差
<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/.box{width:201px;height:201px;border:1px solid red;position:relative;}span{width:20px;height:20px;background:blue;position:absolute;right:-1px;bottom:-1px;}</style></head><body><!--身体--><div class="box"><div><span></span></div></div><!--IE6下，绝对定位的父元素的宽高为奇数的时候，元素的right和bottom值会有1px的偏差--></body></html>16、IE6不支持固定定位 css没办法解决
<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/.box{width:100px;height:100px;background:red;position:fixed;left:50px;top:100px;}</style></head><body><!--身体--><div class="box"></div><!--IE6不支持固定定位 css没办法解决--></body></html>17、IE6 7下，输入类型的表单控件上下各有1px间隙
解决办法：给input加浮动
<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/.box{width:200px;height:32px;border:1px solid red; }input{width:100px;height:28px;padding:0;float:left;}</style></head><body><!--身体--><div class="box"><input type="text"/></div><!--IE6 7下，输入类型的表单控件上下各有1px间隙解决办法：给input加浮动--></body></html>18、IE6 7下，输入类型的表单控件加border:none没用
解决办法：1、border:0;2、给input添加背景颜色
<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/.box{width:200px;height:32px;border:1px solid red; }input{width:100px;height:28px;padding:0;float:left;border:none;background:#fff;}</style></head><body><!--身体--><div class="box"><input type="text"/></div><!--IE6 7下，输入类型的表单控件加border:none没用解决办法：1、border:0;2、给input添加背景颜色--></body></html>19、IE6 7下，1、输入类型的表单控件添加背景图片 url和no-repeat之间一定要有空格
2、输入文字时候，背景图片会跟着移动
解决办法：2、给背景图片固定定位，但是在IE7下 背景图片显示会错误
最佳办法：把背景图添加给父元素
<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/.box{width:200px;height:32px;border:1px solid red; background:url(ball.png) no-repeat; }input{width:100px;height:30px;padding:0;float:left;border:none;background:none;/*background:#fff url(ball.png) no-repeat fixed;*/}</style></head><body><!--身体--><div class="box"><input type="text"/></div><!--IE6 7下，1、输入类型的表单控件添加背景图片 url和no-repeat之间一定要有空格2、输入文字时候，背景图片会跟着移动解决办法：2、给背景图片固定定位，但是在IE7下 背景图片显示会错误最佳办法：把背景图添加给父元素--></body></html>20、IE6不支持tbale
<!doctype html><!--声明当前文档为html文档--><html lang="en"><!--语言为英语--><head><!--头部--><meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码--><meta name="Keywords" content="关键词"><meta name="Description" content="描述"><title>Document</title><style>/*css样式表的衣柜*/*{margin:0px;padding:0px;}/*去除默认外边距、内边距*/table{width:200px;border-collapse:collapse;background:red;}tbody{background:blue;}tr{background:url(ball.png) no-repeat;}td{height:20px;}</style></head><body><!--身体--><table><tr><td>表格</td></tr></table><!--IE6不支持tbale--></body></html> 0 0
- 浏览器的兼容问题2
- 常见浏览器的兼容问题2
- 一个浏览器的兼容问题
- 浏览器兼容问题的解决方案
- 浏览器的兼容问题
- 浏览器的兼容问题？
- 常见的浏览器兼容问题
- 浏览器的兼容问题
- 常见浏览器的兼容问题
- 浏览器的兼容问题解决办法
- 浏览器的兼容问题
- 常见的浏览器兼容问题
- 常见浏览器的兼容问题
- 浏览器的兼容问题
- 浏览器的兼容问题
- 常见的浏览器兼容问题
- 常见浏览器的兼容问题
- 浏览器兼容问题的解决
- Java使用Protocol Buffers入门四步骤
- 中维世纪监控某一特定时间段视频的恢复
- 如何混合使用C和C++（上）
- Retrofit---java.lang.NoSuchMethodError: No virtual method isSuccess()Z in class Lretrofit2/Response
- 为程序创建conf.ini文件时需要的类
- 浏览器的兼容问题2
- hiho一下题解汇总
- matlab中size()函数的用法
- Freely Available Software for Linear Algebra (August 2015) 各种求解器的总结
- 如何发送一条消息通过 Outlook 对象模型与 VC++
- 请教signal的问题
- 编写一个程序实现模式串的各种模式匹配
- Linux多线程──主线程和子线程分别循环一定次数
- 浅谈内存的泄漏(二)
