Delphi & CSS - 盒子模型问题答案

【问题标题】：Delphi & CSS - box model questionDelphi & CSS - 盒子模型问题
【发布时间】：2011-05-11 06:10:13
【问题描述】：

我正在使用一个基于 Windows 的程序，用 Delphi 编码来生成 HTML（并且可以将浏览器限制为 MSIE 7 +）。

我需要绝对的、像素完美的所见即所得。但是，我遇到了文本换行问题。

在 Delphi 中是这样的

-- -----------------
| aaaa bbb ccc ddd |
--------------------

在浏览器中看起来像这样（MS IE 和 FF。虽然我只针对 MSIE，但我使用 FF 来访问 FireDebug）

--------------------
|   aaaa bbb ccc   |
--------------------
ddd

现在，Delphi 有一个对象检查器

它允许我精确地设置控件的顶部/左侧/宽度/高度，并且在生成 HTML 时，我使用它们来对表单上的每个控件进行 CSS 定位。例如

<fieldset style="position: absolute; top: 56px; left: 32px; width: 185px; height: 13px; ">
  <legend> </legend>
  <div style="position: absolute; top: 0px; left: 0px; width: 179px; height: 13px;">
     Label1 000 111 222 aaa bbb cccc dd
  </div>
</fieldset>

但是由于我得到了文本换行，我想我忽略了一些东西，比如边距/边框/填充的设置。有什么想法吗？

顺便说一句，我使用 Arial 10 作为我的字体来比较 Windows/浏览器，所以它不应该是字体大小问题。

我认为 Delphi 必须有类似于盒子模型的东西，因为它用边距绘制控件（从左边 0 开始的控件与表单左侧有一个可见的间隙；如果我给它宽度 100 和位置另一个left = 100，它们之间有明显的差距）。

知道我将如何实现所见即所得吗？ HTML 必须反映 Delphi 表单中的控件布局。

【问题讨论】：

去掉<div style="标签中的position: absolute;和width: 179px; height: 13px;怎么样？
抱歉，我需要那个。我所拥有的是一个面板（表示为 FieldSet），它可以包含多个控件 - 在本例中为单行文本（TLabel），因此面板需要定位，其内容也是如此。
添加了 HTML 标签以吸引更多知识渊博的人群； Delphi 基本上是无关紧要的，一旦你知道了你需要的正确标记，你就可以使用任何工具来实现它。
是表单中的字段集。如果您有表单，表单具有默认的填充和/或边距，它们是否为零，并且字体是明确的 10px 也许如果没有单位有冲突？
即使在 IE7 和 8 之间，图例本身也会导致字段集的高度不同 - 并且字段集在浏览器中具有不同的默认填充，因此请尝试将其上的填充也归零

标签： html css delphi wysiwyg css-position

【解决方案1】：

试试这个，这是你想要达到的目标吗？

<html>
<head>
</head>
 <body>
  <form style="margin:0 0 0 0; padding:0 0 0 0;">
   <fieldset style="position: absolute; top: 56px; left: 32px; width: 185px; height: 18px; ">
     <legend></legend>
     <div style="text-align: center; position: absolute; top: 0px; left: 0px; width: 179px; height: 18px;">aaa bbb cccc dd</div>
   </fieldset>
</form>
</html>

【讨论】：