Contents
  1. 1. vertical-align兼容性

vertical-align兼容性

1
2
3
4
5
<div style="display:inline-line;">
<a href="#" class="a-upload">
<input type="file" id="uploadFile" value="" name="file" multiple="multiple" class="file" />选择文件
</a>
</div>

选择文件后,后面展示的文件名并未对齐(在自定义这个选择文件Button后), 想到使用vertical-align:middle;属性, 测试发现,ChromeFirefoxSafari三大浏览器表现情况各不一致.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.a-upload {
vertical-align: middle;
margin-top: 10px;
margin-left: 32px;
padding: 5px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1;
text-decoration: none;
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
cursor: pointer
}
.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
/* font: bold 12px/20px arial, sans-serif; */
}

正确使用:

1
2
3
4
5
6
7
span.showFileName {
vertical-align: middle; /* */
vertical-align: -webkit-baseline-middle; /* Chorme/Safari */
vertical-align: -moz-middle-with-baseline; /* Firefox */
margin-left: 10px;
margin-top: 2px;
}

vertical-align: -webkit-baseline-middle;SafariChrome 中均ok,vertical-align: -moz-middle-with-baseline;针对火狐。

效果图:



1
2
3
4
5
6
7
8
9
10
11
#开发&测试环境
OS Sierra 10.12
#Safari
版本 10.0 (12602.1.50.0.10)
#Firefox
56.0.2 (64 位)
#Chrome
62.0.3202.94(正式版本) (64 位)

条件所限,IE未经测试!


Creative Commons License
本文由Lomo创作和发表,采用Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License进行许可.
转载请注明作者及出处,本文作者为Lomo,本文标题为vertival-align兼容问题.
Contents
  1. 1. vertical-align兼容性