标签：浏览器 float ie6 学习 内容 按钮 代表作品 今日 grid
- 网格布局
设置成网格 display：grid、inline-grid
设置列数和列宽 grid-template-columns：repeat（列数，宽度）；
设置行数和行高 grid-template-rows：repeat(行数，行高)；
划分区域 grid-template-areas：有几行就写几对引号 引号里边用名字代替区域
设置行和列的空隙 grid-gap
制定那个区域属于那个元素（给子元素写）grid-area：名字（区域划分的名字）
单元格在整个父元素中的的对齐方式place-centent （这个可以实现水平垂直居中）
- 浏览器的兼容
浏览器内核代表作品
*Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器
代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于windows平台，且是不开源的。
*Gecko(壁虎)：代表作品Mozilla Firefox 是开源的,它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行。
*Webkit : 代表作品Safari、Chrome ， 是一个开源项目。
*Presto : 代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎 ( Opera前内核 已经废弃,现在欧鹏浏览器 用的是 谷歌的 Blink )。
*Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。
- 图片（插入图片）兼容问题
向下撑大3像素：给图片写diplay:block; 或者vertical-align:top/middle/bottom 给图片添加float；给父元素添加font-size:0
通过超链接插入的图片在ie浏览器中会有边框：border:none/0; hidden ie6不支持
- 表单行高不一致（清空浏览器默认值的时候input距离上边还存在一定的空隙）
给input添加float属性
- 按钮大小不一致
将input变成怪异盒模型 box-sizing：border-box
给按钮单独设置高度
使用其他标签代替按钮
使用背景图片的方式代替按钮
在按钮的外部嵌套一个标签
- 鼠标指针变成小手型
Cursor:pointer /hand(只有ie支持)
- 透明度的兼容
Filter：alpha(opacity=value) 0-100 ie支持
Opacity:value 0-1 其他浏览器支持
- 双边距问题（ie6上将float向边缘的margin按照双倍解析）
给float的元素添加display:inline
- Ie6的默认高度问题（ie6上将低于16px以下的高度按照16px去解析）
解决方法：overflow：hidden或者 font-size:0;
- Ie6的百分比问题（ie6里边将50%+50%按照大于100%去解析）
给浮向右边的元素添加clear:right;
- 过滤器
下划线 ie6支持
关键字 ！Important
星号 ie6 ie7支持
Background:#f00\9 ie9以下支持
- 移动端1像素边框的兼容解决（手机上显示的是2px）
利用缩放去解决
- Flexbase.js
- Animation.css
https://www.jq22.com/yanshi819
必须引入animated class
标签：浏览器,float,ie6,学习,内容,按钮,代表作品,今日,grid 来源： https://blog.csdn.net/weixin_45273844/article/details/119301575
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。