博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS浏览器兼容问题
阅读量:7076 次
发布时间:2019-06-28

本文共 1606 字,大约阅读时间需要 5 分钟。

1. IE6 下双倍浮动问题,display: inline 因为元素是浮动的,display 属性不会影响显示方式。

2. IE6 3px 文本偏移bug,浮动元素设置 margin-right: -3px。
3. min-width 和 min-height 只有 IE6不支持, 对于 height IE6 默认为最小高度,但是width 不是最小宽度。
4. <div><img src='1.jpg' /></div>
所有浏览器图片下方有空隙,通过设置如下属性可以避免。img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom
5. 如何让元素与文本输入框居中对齐,只要设置 输入框 vertical-align: middle; 元素设置 display: inline 或者 display: inline-block;
6:定义 1px 在IE6 下,设置 { height: 1px; overflow: hidden; } 或者 zoom: 0.07(小于 0.07也可)
7: hack:
   _ IE6 支持;
  * IE6 和 IE7;
  \9 IE6和IE6+浏览器 Chrome 和Firefox 不支持
  \0 IE8 和 IE8+ 支持

  !important 所有浏览器都识别,所有浏览器都认为它的优先级最高,除了IE6不会提高它的优先级。

  div { background:red; background:green !important;}
  或div { background:green !important; background:red; }
  除了 IE6, 所有浏览器都为 绿色,IE6 第一个为绿色,第二个为红色,所以建议 important 放在后面来写。 如果写成 div { background:green !important;} IE6 下也是绿色的。
8: Firefox 对于输入框input 不能设置 line-height的值,而chrome 默认input 里的文字就是垂直居中,设置line-height 只有大于input 的高度才起作用,所以一般通过 padding 填充input 框的高度。
chrome 中文版本不能设置 font-size 小于12px。
9: 盒子模型: IE6 在混杂模式下使用自己的非标准盒模型 width = 内容 + 内边距 + 边框总和。
10: 对于行内元素 比如 span, 设置 width height margin-top margin-bottom padding-top padding-bottom border-top border-bottom是不起作用的, 而 line-height margin-left margin-right padding-left padding-right border-left border-right 是起作用的。
专业术语: 垂直内边距、垂直边框和垂直外边距 不影响行内框的高度,修改行内框的尺寸的唯一方法是修改行高或者 水平内边距、水平边框和水平外边距。
PS: 虽然 padding-top padding-bottom border-top border-bottom 不能改变行高,但是border-top 和 border-bottom 设置完能显示上下边框, 而当这个元素设置背景颜色的时候 padding-top padding-bottom 能显示背景颜色。

 

转载于:https://www.cnblogs.com/zhengming2016/p/5535220.html

你可能感兴趣的文章
基本排序排序算法
查看>>
第十八章 29创建可自动调节大小的string类字符串对象
查看>>
Latex多行公式的处理[转]
查看>>
操作符重载
查看>>
SQLPLUS工具简介
查看>>
AnDroidDraw+DroidDraw实现Android程序UI设计
查看>>
Multipatch 从点文件生成multipatch
查看>>
iOS模拟器,点击textfield为什么不弹出软键盘
查看>>
Jetty 7.6.8 和 8.1.8 发布
查看>>
程序员如何做出“不难看”的设计
查看>>
类苹果启动器 Cairo Dock 3.1.2 稳定版发布
查看>>
2012用户体验年会 奇虎360CEO兼首席体验官 周鸿祎主题演讲——简而未减
查看>>
Shipping your PyQt app for windows
查看>>
keil MDK编译器警告和错误详解
查看>>
javascript/jquery判断是否为undefined或是null!
查看>>
hdu3791(二叉搜索树)
查看>>
[C#]解决生成的缩略图模糊的问题
查看>>
jQuery常用标签详解
查看>>
学用MVC4做网站五:文章
查看>>
学习C++ -> 引用( References )
查看>>