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

先看效果对比

Chrome下:
css文字竖向排列writing-mode属性IE11下高度问题_第1张图片
IE11下:
css文字竖向排列writing-mode属性IE11下高度问题_第2张图片

再看代码
html

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下高度问题_第3张图片
实际上ie上已经渲染了,那就应该是布局样式问题了,然后去查样式,最后发现,在IE中竖向p标签高度被渲染了100%,Chrome中则不是:
IE:
css文字竖向排列writing-mode属性IE11下高度问题_第4张图片
Chrome:
css文字竖向排列writing-mode属性IE11下高度问题_第5张图片

所以我的(最近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;
}

white-space相关参考:https://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/

你可能感兴趣的:(CSS,前端)