0
我希望瀏覽器調整大小時水平縮小內容。調整瀏覽器中的內容調整大小而不彎曲
如果我將display: flex指定爲jp-controls，它可以很好地工作。不過，我需要支持IE9，所以我不能使用flex。我如何做等效但支持IE9？
，看看它目前的確，開放開發工具=>移動設備，並選擇分辨率372×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;
}
這個效果很好。我只是希望不要使用表格，因爲它們只是表格數據（或者我已經閱讀過）。我讀過表格有無障礙問題 –
CSS「'display：table'」不會改變任何元素的語義。效果只是視覺佈局效果，這是CSS的領域。 - 進一步看[這裏解釋]（http://softwareengineering.stackexchange.com/questions/297807/is-the-table-tag-and-displaytable-a-functional-or-a-layout-directive） – pol