前端之CSS常见兼容性问题
1、双倍浮动BUG:
描述:块状元素设置了float属性后,又设置了横向的margin值,在IE6下显示的margin值要比设置的值大;
解决方案:给float的元素添加 display:inline;将其转换为内联元素;
2、表单元素行高不一致:
解决方案:
①、给表单元素添加vertical-align:middle;
②、给表单元素添加float:left;
3、IE6(默认16px为最小)不识别较小高度的标签(一般为10px):
解决方案:
①、给标签添加overflow:hidden;
②、给标签添加font-size:0;
4、图片添加超链接时,在IE浏览器中会有蓝色的边框:
解决方案:
给图片添加border:0或者border:none;
5、最小高度min-height不兼容IE6;
解决方案:
①、min-height:100px;_height:100px;
②、min-height:100px;height:auto!important;height:100px;
6、图片默认有间隙:
解决方案:
①、给img添加float属性;
②、给img添加display:block;
7、按钮默认大小不一:
解决方案:
①、如果按钮是一张图片,直接用背景图作为按钮图片;
②、用a标记模拟按钮,使用JS实现其他功能;
8、百分比BUG:
描述:父元素设置100%,子元素各50%,在IE6下,50%+50%大于100%;
解决方案:
给右边的浮动元素添加clear:right;
9、鼠标指针BUG:
cursor:hand 只有IE浏览器识别;
cursor:pointer;IE及以上浏览器和其他浏览器都识别(手型);
10、透明度设置,IE不识别opacity属性:
解决方案:
标准写法:opacity:value;(取值范围0-1);
兼容IE浏览器 filter:alpha(opacity=value);(取值范围1-100);
11、上下margin重叠问题:
描述:给上面的元素设置margin-bottom,给下面的元素设置margin-top,只能识别其中较大的那个值;
解决方案:
①、margin-top和margin-bottom 只设置其中一个值;
②、给其中一个元素再包裹一个盒子,并设置over-flow:hidden;
12、给子元素设置margin-top.应用在了父元素上:
解决方案:
①、把给子元素设置的margin-top改为给父元素设置padding-top;
②、给父元素设置1px的border,即border-top:1px solid transparent;
③、给父元素设置over-flow:hidden;
④、给父元素设置float:left;
前端之CSS常见兼容性问题的更多相关文章
- css 常见兼容性问题及解决方案
css 兼容问题一直是困扰前端开发人员的大难题,提到兼容性立马想到了万恶的ie6,说多了都是泪,还是整理一些常见的兼容性问题以及解决的方案吧. 一. 浮动元素双边距. ①条件:ie6下,如果给元素设置 ...
- CSS常见兼容性问题总结
原文链接:渔人码头 http://www.cnblogs.com/imwtr/p/4340010.html?utm_source=tuicool&utm_medium=referral 浏览器 ...
- CSS常见兼容性问题
DOCTYPE 影响 CSS 处理 Firefox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 Firefox: body 设置 tex ...
- [Web 前端] 007 css 常见的七种选择器
1. 标签选择器 影响范围大 建议尽量应用在层级选择器中 举例 <!-- body 体中的 div --> <div>box...</div> /* style 中 ...
- IE6下CSS常见兼容性问题及解决方案
1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动. 2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理.解决方案:给元素加 overflow:h ...
- 前端进阶系列(二):css常见布局解决方案
水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</di ...
- 前端研究CSS之文字与特殊符号元素结合的浏览器兼容性总结
页面布局里总是会有类似 “文字 | 文字” 的设计样式,不同的浏览器存在严重偏差. 有兼容问题就要解决,下面总结了3种解决方案,分享给大家: 一.系统默认的样式 1.元素换行的段落 <div c ...
- css CSS常见布局解决方案
CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...
- IE6的那些css常见bug(汇总)
IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...
随机推荐
- python操作oracle数据库
本文主要介绍python对oracle数据库的操作学习 包含:oracle数据库在Windows操作系统下的安装和配置.python需要安装的第三方拓展包以及基本操作的样例学习. 1 ...
- configure: error: APR not found. Please read the documentation
本以为Apache的编译安装很简单,其实不然: 以前的环境下编译报错很少 ,但这次不行了 提示configure: error: APR not found. Please read the docu ...
- Java笔记(十)
正则表达式: 符合一定规则的表达式,用于专门操作字符串. 对QQ号码进行校验,要求:5-11位,0不能开头,只能是数字. public class Demo{ public static void m ...
- robotium
Test run failed: Permission Denial: starting instrumentation ComponentInfo{android.support.v7.appcom ...
- Linux线程退出、资源回收、资源清理的方法
首先说明线程中要回收哪些资源,理解清楚了这点之后在思考资源回收的问题. 1.子线程创建时从父线程copy出来的栈内存; 线程退出有多种方式,如return,pthread_exit,pthread_c ...
- HDU1711(KMP入门题)
Number Sequence Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- CSS:CSS 颜色
ylbtech-CSS:CSS 颜色 1.返回顶部 1. 颜色是通过对红.绿和蓝光的组合来显示的. 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光 ...
- org.dom4j.DocumentException: null Nested exception: null解决方法
由于最近在学习使用spring架构,经常会遇到与xml文档打交道,今天遇到了此问题,特来分享一下解决方案. 出错原因: 很明显是因为找不到文件路径.这个原因是因为我使用了*.clas.getResou ...
- Laravel之简单的学生信息管理平台
laravel框架写的简易版的学生信息管理平台,贯穿了laravel的控制器.视图.模板.模型.中间件.路由规则的使用. 页面是使用BootStrap前端框架搭建 使用laravel实现了增删改查的功 ...
- 序列化框架MJExtension详解 + iOS ORM框架
当开发中你的模型中属性名称和 字典(JSON/XML) 中的key 不能一一对应时, 或者当字典中嵌套了多层字典数组时..., 以及教你如何用 MJExtension 配置类来统一管理你的模型配置, ...