0
ブラウザのサイズを変更すると、コンテンツが横方向に縮小されます。ブラウザでコンテンツのサイズを変更せずにフレックスサイズを変更する
display: flexをjp-controlsに割り当てると完全に機能します。しかし私はflexを使うことができないようにIE9をサポートする必要があります。どのように私は同等のを行うが、IE9のサポートをしていますか？
それが現在何を参照するには、オープン開発ツール=>モバイルデバイスと私は（しかしdisplay: flexを使用せずに欲しい
https://jsfiddle.net/3ej343z4/1/
を溢れるコンテンツを見るために、解像度372×300を選択し、どのように注意してくださいいいえあふれ）：
それが現在何：
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