前端之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;

原文地址:https://www.cnblogs.com/21-forever/p/10851178.html

时间: 2024-10-05 02:26:19

前端之CSS常见兼容性问题的相关文章

CSS常见兼容性问题总结

你想要执行的代码 你想要执行的代码 浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况. 这里谈到的浏览器,主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等. 但更多的兼容还是考虑IE6/IE7/FF之间的斗争 先来谈谈CSS Hack 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样式,所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack. CSS ha

IE6下CSS常见兼容性问题及解决方案

1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动. 2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理.解决方案:给元素加 overflow:hidden. 3. border:1px dotted #000: 1px dotted 在IE6下不支持 解决方案:切背景平铺 4. margin传递:解决方案:a.父级或自己浮动; b.给元素加 overflow:hidden;zoom:1; 5. 在IE6下父级有边框的时候,子元素的margi

IE下常见兼容性问题总结

概述 本小菜平时主要写后台程序,偶尔也会去写点前端页面,写html.css.js的时候,会同时开着ie6.ie7.ie8.ie9.chrome.firefox等浏览器进行页面测试,和大部分前端开发一样,经常被ie折磨,下面就总结一些常见的浏览器兼容性问题,放一起方便自己总结学习,我知道这类型文章,很多大牛都总结过,且写的特别专业.不过我写的都是自己最近碰到的,本人技术一般,也希望各位多加指点. 一.IE6/IE7对display:inline-block的支持欠缺 1)表现描述 这个应该算是很经

web前端开发的浏览器兼容性

首先我们来看一下目前市面上常见的一些浏览器:ie.chrome.firefox.safari.opera.maxthon.360.qq.yy.uc.sogou.2345.淘宝.猎豹.世界之窗等 其中表现很出色的有chrome.firefox.safari等:而表现极差的就是ie6/7内核浏览器了,我们的兼容性工作大半都是围绕这两个浏览器内核展开 我们的常规处理方式是调试各浏览器网页显示效果.使用成熟的前端开发框架.运用css与hack技巧等 常见hack技巧 css _:ie6内核浏览器识别 c

CSS浏览器兼容性问题

常见的CSS浏览器兼容性问题及解决方案: 1. div的垂直居中问题 CSS的vertical-align属性,是对(x)html中具有valign特性的元素才起作用的,例如,表格元素的<caption>.<th>.<td>,而像<div>.<span>这样的元素不具有valign特性,veritcal-align对这些元素不起作用.

WEB前端性能优化常见方法

web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式. 1. 内容优化 (1)减少HTTP请求数:这条策略是最重要最有效的,因为一个完整的请求要经过DNS寻址,与服务器建立连接,发送数据,等待服务器响应,接收数据这样一个消耗时间成本和资源成本的复杂的过程. 常见方法:合并多个CSS文件和js文件,利用CSS Sprites整合图像,Inline Images(使用 data:URL scheme在实际的页

CSS常见布局问题整理

实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 使用position,相对父元素做绝对定位(设置百分比[由父元素宽高调节子元素大小]/设置margin和相对位置(确定宽高)) 使用flex属性 使用tranfrom做相对位移的调节 1) 只适用: 宽高已定 设置position: absolute(父元素记得设置: relative), 然后t

html常见兼容性问题

html常见兼容性问题? 1.双边距BUG float引起的  使用display 2.3像素问题 使用float引起的 使用dislpay:inline -3px 3.超链接hover 点击后失效  使用正确的书写顺序 link visited hover active 4.IE z-index问题 给父级添加position:relative 5.Png 透明 使用js代码 改 6.Min-height 最小高度 !Important 解决' 7.select 在ie6下遮盖 使用ifram

div+css通用兼容性代码整理

一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} 复制代码 代码如下: <style> *html{padding:0px} /* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */