问题一、mailto在ie浏览器下使用中文乱码问题
<a href="mailto:myson@foxmail.com?subject=邮件主题">发邮件</a>
解决方式:先将中文参数进行UrlEncode编码
<a href="mailto:myson@foxmail.com?subject=%e9%82%ae%e4%bb%b6%e4%b8%bb%e9%a2%98">发邮件</a>
问题二、ie环境下justify-content失效
场景描述,,采用伸缩布局让块级元素一行均匀显示(两端对齐);中间用一条横向相连;
谷歌浏览器下没问题,但是IE就:
代码如下:
css部分:
.box{
width: 1400px;
height: 200px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 5px;
display: flex;
justify-content: space-between;
position: relative;
}
.box>span{
border-top: 1px solid #ccc;
position: absolute;
top: 50%;
width: 100%;
z-index: 10;
}
.box>div{
width: 200px;
height: 200px;
border: 1px solid pink;
border-radius: 100%;
text-align: center;
line-height: 200px;
position: relative;
z-index: 100;
background: white;
}
html部分:
<div class="box">
<span></span>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
网上的解释是如果容器高度小于子元素高度,justify-content: space-between;无效;
但是实践了一下,发现无效。
同时回忆了下伸缩布局的含义,发现很有可能是因为span标签,既然它和子div只是层级关系,那么就给子div再包一层div.list,并将.box的布局属性去掉的同时将属性赋给.list
代码如下:
html部分:
<div class="box">
<span></span>
<div class="list">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
css部分:
.box .list{
width: 100%;
display: flex;
justify-content: space-between;
}
.box .list>div {
width: 190px;
height: 190px;
border: 1px solid pink;
border-radius: 100%;
text-align: center;
line-height: 200px;
position: relative;
z-index: 100;
background: white;
}
完美: