☰

CSS 绝对定位在 MS Word 中不起作用

tag-icon • tag-icon microsoft-word css layout
CSS 绝对定位在 MS Word 中不起作用

这是一个示例：

<html>
<head>
    <title>word test</title>
</head>
<body>
    <div style='position: absolute; width: 30px; height: 50px; top: 100px; left: 20px; border-color: black; border-width: 1px; border-style: solid;'>
        <p>Hello!</p>
    </div>
</body>
</html>

将其保存为“word.doc”并在 MS WORD 中打开。

绝对位置不起作用！

Div 呈现在文档顶部，宽度为 100%。为什么？我不能使用 html 表格。

微软 Word 版本：2003

答案1

您可以在此处找到 Word 2007 支持的 CSS 的完整列表：

http://msdn.microsoft.com/en-us/library/aa338201%28office.12%29.aspx

是的，它确实差得令人震惊，但你对微软 Office 团队还有什么期望吗？

以下是 CSS2 的快速参考列表，不能使用：

  • 方位角
  • 背景附件
  • 背景图
  • 背景位置
  • 背景重复
  • 边框间距
  • 底部
  • 标题侧
  • 清除
  • 夹子
  • 内容
  • 反增
  • 反复位
  • 提示前、提示后、提示
  • 光标
  • 展示
  • 海拔
  • 空单元格
  • 漂浮
  • 字体大小调整
  • 字体拉伸
  • 左边
  • 越线
  • 列表样式图像
  • 列表样式位置
  • 标记偏移量
  • 最大高度
  • 最大宽度
  • 最小高度
  • 最小宽度
  • 孤儿
  • 大纲
  • 轮廓颜色
  • 大纲样式
  • 轮廓宽度
  • 溢出
  • 溢出-x
  • 溢出
  • 暂停前，暂停后，暂停
  • 沥青
  • 音调范围
  • 玩耍时
  • 位置
  • 引号
  • 丰富
  • 正确的
  • 说话
  • 朗读标题
  • 說數字
  • 說出標點
  • 语速
  • 压力
  • 表格布局
  • 文字阴影
  • 文本转换
  • 顶部
  • unicode-bidi
  • 能见度
  • 语音家族
  • 体积
  • 寡妇
  • 字间距
  • z 索引

答案2

可能是因为 Microsoft Word 使用了自己的渲染器，这很糟糕。

2007 年的一篇文章说……

不支持浮动或定位

（这应该适用于你，因为你的版本是 2003）

所以你运气不好。不幸的是，由于这个原因，基于表格的布局在 HTML 电子邮件中仍然很常见。

答案3

好的，我遇到了同样的问题。我所做的是在 Word 中格式化我的 html 文档并保存它。然后我将标记精简为我真正需要的内容。您需要将 vml 命名空间包含在您的 html 文档中 (xmlns:v="urn:schemas-microsoft-com:vml")

<html xmlns:v="urn:schemas-microsoft-com:vml">

然后你需要以下代码，随意选择 id，你也可以自由选择图像的位置。图像位于文本前面。

<!--[if gte vml 1]><v:shape id="Bild_x0020_1" type="#_x0000_t75"
style='position:absolute;left:0;text-align:left;margin-left:338.55pt;
margin-top:26pt;width:105pt;height:138.75pt;z-index:251658240;'>
<v:imagedata src="http://c7.valuewalk.com/wp-content/uploads/2011/12/billg4_web1.jpg"/>
</v:shape><![endif]-->

虽然我不确定这是否适用于 Word 2003，但我的版本是 2010。

相关内容