兼容性总结

CoXie 发布于2019-08-30 13:04 / 1558人阅读

摘要：写在前面的话，也不知道还要不要管，晕晕乎乎的兼容性引用在元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动例左侧右侧给它设置显示如下解决办法在下元素要通过浮动并在同一行，就给这行元素都加浮动例样式结果解决都浮动注意标签嵌套规范例

写在前面的话，也不知道还要不要管ie6、7，晕晕乎乎的

1、h5兼容性

引用html5shiv.js

2、

1. 在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动

例：

给它设置css

.box{ width:200px;}
.left{background:red;float:left;}
.right{float:right; background:blue;}
h3{margin:0;height:30px;}

显示如下：

解决办法：

h3{margin:0;height:30px; float:left;}

-2 在IE6下元素要通过浮动并在同一行，就给这行元素都加浮动

例：

样式

    .left{width:100px;height:100px;background:red; float:left;}
.right{width:200px;height:100px;background:blue;margin-left:100px;}

结果：

解决：都浮动

3- 注意标签嵌套规范

例

样式

结果

- IE6下最小高度问题

在IE6下元素的高度的小于19px的时候，会被当做19px来处理
解决办法:`overflow:hidden;`

- 4在IE6下父级有边框的时候，子元素的margin值消失

例

样式

结果

解决

在IE6下解决margin传递要触发haslayout

.box{background:blue;border:1px solid #000;zoom:1;}

5、css hack

针对不同的浏览器写不同的CSS 样式的过程，就叫CSS hack!

‘ 9 ’ 所有的IE9及之前

‘ + ’ 和 ‘ * ’ IE7及ie7的ie浏览器认识

‘ _IE6 ’及ie6的ie浏览器认识

例：

.box{ width:100px;height:100px;background:red;background:blue9;      
      +background:yellow;_background:green;}
@media screen and (-webkit-min-device-pixel-ratio:0){.box{background:pink}}

6、html条件注释语句





无标题文档

混合云 idc机房托管年终总结网络总结方法总结函数总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115281.html

css居中总结

摘要：前言一直有个想法要把各种居中的方法总结一下，但还是一直没有时间去整理。最近刚好在做样式重构的项目，顺便把一下自己有用过的或积累的居中方法给总结一下。又必须有个父级对其进行设置居中。前言一直有个想法要把各种居中的方法总结一下，但还是一直没有时间去整理。最近刚好在做样式重构的项目，顺便把一下自己有用过的或积累的居中方法给总结一下。水平居中行内元素水平居中行内元素的居中比较简单，直...

gxyz 2019-08-30 15:55 评论0 收藏0
关于CSS居中问题的一些总结

摘要：兼容性属性兼容存在一定问题，高版本需要添加前缀父子第四使用通过父级元素布局将子框转换为再设置子元素水平居中兼容性不支持父子第五水平垂直将水平居中和垂直居中的相结合兼容性属性兼容性问题父子第六父相对子绝对，上下左右居中兼容性及以上父子前端页面开发中关于内容居中的需求应用概率很大，自己搜集一些资料和总结关于css里的几种居中效果实现第一常用text-align:center先将子元素将...

Riddler 2019-08-30 14:14 评论0 收藏0
关于CSS居中问题的一些总结

摘要：兼容性属性兼容存在一定问题，高版本需要添加前缀父子第四使用通过父级元素布局将子框转换为再设置子元素水平居中兼容性不支持父子第五水平垂直将水平居中和垂直居中的相结合兼容性属性兼容性问题父子第六父相对子绝对，上下左右居中兼容性及以上父子前端页面开发中关于内容居中的需求应用概率很大，自己搜集一些资料和总结关于css里的几种居中效果实现第一常用text-align:center先将子元素将...

ISherry 2019-08-01 18:44 评论0 收藏0
垂直水平居中的方式总结 +（使用场景）

摘要：内容无法撑开父级容器表格容器居中使用场景容器内容居中，并不想脱离文档流。缺点不适用于弹层这种盖住页面内容的布局使用和垂直居中值等于元素高度的值使用场景一个容器内部的当韩文字居中优点内容宽高，容器宽高均不用。以前前端面试基础问题的时候经常会被问到这个问题：但是从来没有做过这样的总结，网上很多人总结的很多，很好。自己干了这么多年，这个问题使用场景还是蛮多的，还是自己总结一下吧（不断更新）...

YuboonaZhang 2019-08-01 18:01 评论0 收藏0
垂直水平居中的方式总结 +（使用场景）

摘要：内容无法撑开父级容器表格容器居中使用场景容器内容居中，并不想脱离文档流。缺点不适用于弹层这种盖住页面内容的布局使用和垂直居中值等于元素高度的值使用场景一个容器内部的当韩文字居中优点内容宽高，容器宽高均不用。以前前端面试基础问题的时候经常会被问到这个问题：但是从来没有做过这样的总结，网上很多人总结的很多，很好。自己干了这么多年，这个问题使用场景还是蛮多的，还是自己总结一下吧（不断更新）...

Kaede 2019-08-05 12:24 评论0 收藏0
垂直水平居中的方式总结 +（使用场景）

摘要：内容无法撑开父级容器表格容器居中使用场景容器内容居中，并不想脱离文档流。缺点不适用于弹层这种盖住页面内容的布局使用和垂直居中值等于元素高度的值使用场景一个容器内部的当韩文字居中优点内容宽高，容器宽高均不用。以前前端面试基础问题的时候经常会被问到这个问题：但是从来没有做过这样的总结，网上很多人总结的很多，很好。自己干了这么多年，这个问题使用场景还是蛮多的，还是自己总结一下吧（不断更新）...

snifes 2019-08-29 13:49 评论0 收藏0