就用例子加图解来说明吧

【测试源码在下面】

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

  1. 不设置 padding 与 absolute 定位：在这里插入图片描述
  2. 添加padding-right/letf:;与position: absolute; right/left:;：在这里插入图片描述

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

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

  1. 不设置 padding 与 absolute 定位：在这里插入图片描述
  2. 🔶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

在这里插入图片描述

Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

avatar 天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

avatar 天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能

avatar 天工造物局