css布局兼容细节

原创 2015年07月07日 14:05:09

不同浏览器的标签默认的外补丁和内补丁不同,margin 和padding差异问题:

解决方案:css里    *{margin:0;padding:0;}

块属性标签float后,e6中后面的一块被顶到下一行

解决方案:display:inline;将其转化为行内属性

显示溢出文本省

 text-overflow:ellipsis; white-space:nowrap overflow: hidden;

页面居中:

body{margin:0 auto;text-align:center;}

浮动IE6产生的双倍距离:

div{ float:left;width:100px;margin:0 0 0 100px;display:inline;}

去除按下态 ios

input{-webkit-tap-highlight-color:rgba(255,0,0,0);-webkit-tap-highlight-color: transparent;-webkit-appearance: none;border-radius:0;outline: none;}

去除图片间隙

img{display:block}

ie兼容响应式布局的实现总结 和 针对ie浏览器的CSS

参考链接:http://zhidao.baidu.com/link?url=bQioDKMnG_eQoE6dCxzd2hPtMyiB7phu6hBdOupn1Pjk1hV-ItXFZS5GDUBoH5...
  • dmtnewtons
  • dmtnewtons
  • 2014年06月03日 10:02
  • 1323

CSS实现瀑布流等分布局效果,兼容各大主流浏览器

效果如下:代码: 首页
  • CodingNoob
  • CodingNoob
  • 2017年12月11日 14:21
  • 204

【CSS】兼容IE6的卡片式布局

如下图: 这种高大上的布局看起来仿佛只有那些前端框架,而且要考虑很多东西才能够弄出来。 其实不然,完全可以自己手写几句简单的CSS就能够弄出来了。根本无需理会那些动不动就摆大牌说不兼容IE...
  • yongh701
  • yongh701
  • 2015年09月28日 15:44
  • 1940

CSS之flex兼容

随着自己写过的页面的增多,也遇到了很多CSS兼容性的问题。这些兼容性问题,都是必然的,因为技术在不断进步,不断革新,所谓,“后浪推前浪,前浪拍死在沙滩上”,当然我们的技术不能是被拍死在沙滩上,我们还要...
  • u010130282
  • u010130282
  • 2016年09月22日 21:06
  • 23904

Flex布局兼容性写法

flex布局 flex布局目前可使用在移动中,并非所有的语法都全兼容,但以下写法效果良好~ /* ===========================================...
  • u011784135
  • u011784135
  • 2016年02月03日 17:12
  • 8703

CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法 关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者...
  • accpzgp
  • accpzgp
  • 2014年04月17日 15:43
  • 44506

巧用css3的calc()属性进行响应式布局

今天浏览这个http://www.sitepoint.com站时,因为好奇看了下人家写的代码,结果发现了这行代码, 于是就研究了一下,calc()从字面我们可以把他理解为一个函数function...
  • u012238748
  • u012238748
  • 2017年02月08日 15:13
  • 686

前端布局时的浏览器兼容性问题

在这里总结一下css布局时常见的浏览器兼容性问题 1 盒模型 IE6的盒模型和W3C标准的盒模型不同 W3C中的盒模型所定义的宽度和高度为内容区域的宽度和高度 但是盒模型的总大小为margin+bor...
  • charlene0824
  • charlene0824
  • 2016年04月26日 13:36
  • 2168

CSS布局——简洁、兼容性强的垂直水平居中方案

1、absolute,需要知道居中元素的宽与高 charset="utf-8" /> type="text/css"> ...
  • tangxiaolang101
  • tangxiaolang101
  • 2016年06月24日 11:04
  • 575

CSS 两列布局---左侧固定,右侧自适应

前端一个小面试题总结如下: 1、方法一,高度100%,左侧float,右侧自动宽度(会自动占满剩余宽度)。 2、方法二,绝对定位absolute,使用方法一的HTML结构,左侧绝对定位,拉出文档流...
  • osdfhv
  • osdfhv
  • 2016年08月11日 09:30
  • 2699
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css布局兼容细节
举报原因:
原因补充:

(最多只允许输入30个字)