我希望内容在调整浏览器大小时水平缩小。
如果我将 display: flex
分配给 jp-controls
,它会完美地工作。但是我需要支持 IE9 所以我不能使用 flex。如何在支持 IE9 的情况下做同样的事情?
要查看当前的效果,请打开 Dev tools => Mobile Device 并选择分辨率 372 x 300 以查看溢出的内容
https://jsfiddle.net/3ej343z4/1/
我想要的(但不使用 display: flex
,注意没有溢出):
目前做什么:
HTML:
<div class="jp-sleek jp-jplayer jp-audio jp-state-volume-low">
<div class="jp-gui" style="opacity: 1;">
<div class="jp-controls jp-icon-controls">
<button class="jp-play"><i class="fa fa-play"></i></button>
<div class="jp-playback-rate-bar">
<div class="jp-playback-rate-bar-value" style="width: 14.2857%;"></div>
</div>
<button class="jp-repeat"><i class="fa fa-repeat"></i></button>
<div class="jp-progress">
</div>
<button class="jp-full-screen"><i class="fa fa-expand"></i></button>
<div class="jp-title-container"><img class="jp-poster" src="https://i.ytimg.com/vi/bM7SZ5SBzyY/hqdefault.jpg">
<div class="jp-title">Fade</div>
</div>
</div>
</div>
</div>
CSS:
.jp-sleek {
z-index: 100;
width: 100%;
font-family: "Source Sans Pro", sans-serif;
}
.jp-sleek .jp-gui {
height: 42px;
background-color: #e5e5e5;
position: relative;
}
.fa {
font-size: 24px;
}
.jp-sleek .jp-gui .jp-controls {
height: 100%;
position: relative;
font-size: 24px;
white-space: nowrap;
}
.jp-sleek .jp-gui .jp-controls button {
color: #000;
padding: 0;
border: none;
background-color: transparent;
}
.jp-sleek .jp-gui .jp-controls > * {
margin-left: 5px;
margin-right: 5px;
display: inline-block;
height: 100%;
vertical-align: top;
}
.jp-sleek .jp-gui .jp-playback-rate-bar {
background-color: #a1c1f4;
cursor: pointer;
width: 60px;
min-width: 30px;
}
.jp-sleek .jp-gui .jp-playback-rate-bar .jp-playback-rate-bar-value {
background-color: #71a6fc;
height: 100%;
width: 14%;
}
.jp-sleek .jp-gui .jp-icon-controls button {
min-width: 42px;
}
.jp-sleek .jp-gui .jp-icon-controls .jp-progress {
background-color: #a1c1f4;
width: 100%;
min-width: 180px;
max-width: 500px;
font-size: 20px;
position: relative;
}
.jp-sleek .jp-gui .jp-title-container {
font-size: 12px;
vertical-align: top;
}
.jp-audio.jp-sleek .jp-gui .jp-title-container .jp-poster {
max-height: 100%;
}
img {
vertical-align: middle;
}
.jp-sleek .jp-gui .jp-title-container .jp-title {
font-weight: bold;
max-width: 135px;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
最佳答案
表格可以表现得像 flexboxes:
.jp-controls {
display: table;
height: inherit; /*42px from the parent*/
}
.jp-controls > * {
height: inherit;
display: table-cell;
}
我在代码中标记了 css 更改: jsfiddle:https://jsfiddle.net/3ej343z4/3/
关于html - 在没有 flex 的情况下在浏览器上调整内容大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42207379/