css文字竖向排列writing-mode属性IE11下高度问题

先看效果对比

Chrome下：
css文字竖向排列writing-mode属性IE11下高度问题
IE11下：

再看代码
html

<div class="data-center__stats--title">
	<span></span>
	<p class="windows__name"></p>
	<p class="dayType"></p>
</div>

css

.data-center__stats--title p {
	width: 25px;
	color: azure;
	font-size: 16px;
	margin: 0;
	line-height: 25px;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-lr;
	writing-mode: vertical-rl;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

一开始觉得jq的text()是ie11哪个地方的兼容问题，后来检查dom发现，
css文字竖向排列writing-mode属性IE11下高度问题
实际上ie上已经渲染了，那就应该是布局样式问题了，然后去查样式，最后发现，在IE中竖向p标签高度被渲染了100%，Chrome中则不是：
IE：

Chrome：

所以我的（最近1天）看起来没了，网上没搜到什么具体案例和解决，又不能设置固定高度给标题，因为二级单位标题可变长度不一定
最后去自习研究了一下writing-mode IE下的特性，直接上解决问题：

display:inline-block

结局：

.data-center__stats--title p {
	width: 25px;
	color: azure;
	font-size: 16px;
	margin: 0;
	line-height: 25px;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-lr;
	writing-mode: vertical-rl;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;//将p标签white-space下置为行内显示
	overflow: hidden;
}

css文字竖向排列writing-mode属性IE11下高度问题

相关推荐