【IE兼容】（含解决方法）纵向排版writing-mode属性，附加padding填充时，用定位属性 absolute+right/left ，无效

最新推荐文章于 2022-04-21 10:39:03 发布

iuukai

最新推荐文章于 2022-04-21 10:39:03 发布

阅读量2.5k

点赞数 1

分类专栏：无聊之作 ie 兼容性问题积累

本文链接：https://blog.csdn.net/weixin_45389633/article/details/104226619

版权

ie 兼容性问题积累同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

无聊之作

4 篇文章 1 订阅

订阅专栏

就用例子加图解来说明吧

【测试源码在下面】

🅰默认书写模式时，即无`writing-mode`属性，文字横着书写：

不设置 padding 与 absolute 定位：
添加padding-right/letf:;与position: absolute; right/left:;：

👉很明显，都正常，无差别👈

🅱当设置`writing-mode: vertical-rl/tb-rl;`，改变文字为纵向书写时：

不设置 padding 与 absolute 定位：
🔶BUG来了🔶添加padding-right/letf:;与position: absolute; right/left:;：

解决方法

我所能想到的解决方法就是：不使用position: absolute;+left/right:;来定位，而改用margin:;来挪动位置：
在这里插入图片描述

测试源码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
	padding: 0;
	margin: 0;
}

.wrap {
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	background: #666;
}

.box {
	width: 500px;
	height: 500px;
	margin: 180px auto;
	background: #fff;
	position: relative;
}

.content {
	width: 200px;
	height: 200px;
	background: pink;
	float: right;
/*测试部分*/
	writing-mode: vertical-rl;	/*非IE浏览器可识别*/
	writing-mode: tb-rl;		/*IE浏览器只识别这条*/	
	padding: 50px;
	position: absolute;
	right: 100px;
		/*margin-right: 100px;*/
}
</style>
</head>

<body>
	<div class="wrap">
		<div class="box">
			<div class="content">文字填充文字填充文字填充文字填充文字填充文字填充文字填充</div>
		</div>
	</div>
</body>
</html>

PS：如果不设置`padding`，那就没这种BUG

在这里插入图片描述

iuukai

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【IE兼容】（含解决方法）纵向排版writing-mode属性，附加padding填充时，用定位属性 absolute+right/left ，无效

就用例子加图解来说明吧【测试源码在下面】????默认书写模式时，即无writing-mode属性，文字横着书写：不设置 padding 与 absolute 定位：添加padding-right/letf:;与position: absolute; right/left:;：????很明显，都正常，无差别????????当设置writing-mode: vertical-rl/tb-rl;，改变文字为...
复制链接

扫一扫