如何在 JavaFX WebView 中保留一个 div？答案

【问题标题】：How do I left pad a div in a JavaFX WebView?如何在 JavaFX WebView 中保留一个 div？
【发布时间】：2013-11-17 22:17:46
【问题描述】：

我正在努力在我的应用程序中获得一致的对齐方式，该应用程序是用 GWT 编写并通过基于 WebKit 的 JavaFX 2.2 WebView (Java 7u40) 查看的。

我遇到的问题是，JavaFX 中的 CSS 布局属性似乎存在问题/缺乏支持。文档 (http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html) 说支持 CSS 2.1（包括 padding、padding-left 等）。

文档还声明“JavaFX CSS 不支持 CSS 布局属性，例如浮动、位置、溢出和宽度。但是，某些 JavaFX 场景图对象支持 CSS 填充和边距属性。"

这是我在 Chrome 中运行良好的内容：

.foo-bar-values {
    padding-left:   22px;
}

但这对 WebView 完全没有影响。

以下是我尝试过的其他规则，它们在 Chrome 中都可以正常工作，但在 JavaFX WebView 中无法执行任何操作：

.foo-bar-values {
    padding:    0px 0px 0px 22px;
}    
.foo-bar-values {
    margin: 0px 0px 0px 22px;
}    
.foo-bar-values {
    margin-left:    22px;
}
.foo-bar-values {
    padding-left:   22px;
    -fx-label-padding:  0px 0px 0px 22px;
}    
.foo-bar-values {
    padding-left:   22px;
    -fx-padding:    0px 0px 0px 22px;
}
.foo-bar-values {
    padding-left:   22px;
    \-fx-label-padding: 0px 0px 0px 22px;
}    
.foo-bar-values {
    padding-left:   22px;
    \-fx-padding:   0px 0px 0px 22px;
}

DOM 的结构如下：

<table>
  <colgroup></colgroup>
  <tbody>
    <tr>
      <td></td>
      <td>
        <div class="foo-bar-values">This doesn't pad.</div>
      </td>
    </tr>
  </tbody>
</table>

如何让 <div> 在 JavaFX WebView 中正确对齐？

【问题讨论】：

因为 javafx 中没有 float 和其他属性.....您必须使用 widthProperty()..nd 在场景构建器中创建控件并初始定义它们的位置

标签： css gwt webview javafx-2 javafx-webengine

【解决方案1】：

显然我链接的文档（我能找到的关于 JavaFX 中 CSS 支持的唯一文档）仅适用于普通的 JavaFX 开发，而不适用于 WebView 本身的功能（基于 webkit）。

看起来padding-left 和其他相关的布局属性在JavaFX WebView 中工作得很好。有一些东西阻止我的 WebView 加载所有 CSS（未知原因）。因此，最后几个值（我需要的）无法用于设置文档样式。

我对我的项目进行了一些主要的清理和重建，并擦除了所有临时和缓存文件，这个问题“自行消失了”。

我现在可以在 WebView 中看到正确应用的填充，并且可以在 FireBug Lite 中看到它：

padding-left    22px

我已验证该规则位于 .war 文件中的 app.css 中，因此 GWT 可以正确生成和捆绑内容。 JavaFX WebView 端似乎存在问题。

【讨论】：