In Chrome and Firefox it displays correctly, but in Internet Explorer the text overlaps. How can I display the text correctly so that it works for IE?
In Chrome and Firefox it displays like below. I want it display the same for IE.
Code CSS & HTML
.chart[id*="Chart_Column"] .ct-label.ct-horizontal.ct-end {
padding: 5px 0 0 0;
font-size: 12px;
}
.ct-chart-bar .ct-label.ct-horizontal.ct-end {
-webkit-box-align: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
text-anchor: start;
}
<style>…</style>
.chart[id*="Chart_Column"] .ct-label {
font-size: 14px;
}
.ct-label.ct-horizontal.ct-end {
-webkit-box-align: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-pack: flex-start;
-webkit-justify-content: flex-start;
-ms-flex-pack: flex-start;
justify-content: flex-start;
text-align: left;
text-anchor: start;
}
.ct-chart-bar .ct-label, .ct-chart-line .ct-label {
display: block;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.ct-label {
color: #111111;
fill: #111111;
}<g class="ct-labels">
<text class="ct-label ct-horizontal ct-end" style="width: 79px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Avg Players Per Match</text>
<text class="ct-label ct-horizontal ct-end" style="width: 79px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">Depth of Selection</text>
<text class="ct-label ct-horizontal ct-end" style="width: 79px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">% of overs bowled</text>
<text class="ct-label ct-horizontal ct-end" style="width: 79px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">% of balls faced</text>
<text class="ct-label ct-horizontal ct-end" style="width: 79px; height: 20px" xmlns="http://www.w3.org/2000/xmlns/">% of matches played</text>
</g>