在 Java 中使用 HTMLEditorKit，<img> 标签忽略了我的 CSS 样式（但文本可以接受样式）

Question

好的，我正在用 Java 开发一个使用 HTMLEditorKit 构建的“聊天窗口”。一般的方法是我首先使用 StyleSheet.addRule() 构建样式表。我建立的样式表是：

body  {color:#ff00ff; font-family:SansSerif; font-size:12pt;}
p     {color:#ff00ff; font-family:SansSerif; font-size:12pt;}
.msg  {color:#ff00ff; font-family:SansSerif; font-size:12pt;}
.csa  {color:#ff0000; font-family:SansSerif; font-size:12pt;}
.usa  {color:#0000ff; font-family:SansSerif; font-size:12pt;}
.icon {width:16px; height:16px; object-position:0 5px; }

然后，当我有一条我想申请的聊天线路时，我把它放在一个 div 中并将它添加到 JTextPane 中：

try {       
  kit.insertHTML(doc, doc.getLength(), "\n<div class="+style+">" + s + "</div>", 0, 0, null);                   
} catch (BadLocationException ble) {
  ErrorDialog.bug(ble);           
} catch (IOException ex) {
  ErrorDialog.bug(ex);            
}
conversation.update(conversation.getGraphics()); //Force update of graphics

到目前为止，一切正常！接下来是希望能够在文本中添加小图像的问题。

只要我坚持 html 属性，添加图片本身也很顺利，例如：

<img src="dice.png" width="16" height="16">

但是，一旦我尝试做以下两件事中的任何一个，它就会忽略我所有的样式：

<img src="dice.png" class="icon">

<img src="dice.png" style="{width:16px; height:16px; object-position:0 5px; }">

我尝试了各种解决方法，包括 span 标签，我尝试了 id 样式（例如#icon 和 id="icon"），单独的 div 等。不高兴！

这是在相当旧的 Java (1.8) 版本下运行的一些遗留软件的附加组件，所以我总是“期待最坏的情况”，但正如我所说的所有 其他 CSS 样式元素（就文本和布局而言）运行良好。寻找任何故障排除提示，或者图像是否存在某种特殊的 HTMLEditorKit 限制（但只要我坚持使用 html 属性而不是 CSS，我的所有图像都可以正常工作，但我所有的 CSS 都可以正常处理文本）。非常感谢您的帮助。

Answer 1

尝试将图像设置为display: block 或display:inline-block。 inline-block 可能不受支持。如果图像是display: inline，则高度和宽度属性不会影响图像。还建议仅设置宽度以保持纵横比。

.icon1 {
  width: 100px;
  height: 100px;
  display: block;
}

.icon2 {
  width: 110px;
  height: 110px;
  display: inline-block;
}

.icon3 {
  width: 120px;
  display: block;
}


/* extra styles for example */

img {
  margin: 4px;
}

<div class="wrap">
  <!-- div not required, just to wrap image in this example -->
  <img src="https://placekitten.com/130/130" class="icon1">
  <img src="https://placekitten.com/128/128" class="icon2">
  <img src="https://placekitten.com/132/132" class="icon3">
</div>

编辑：

如果您设置了 div 的高度和宽度，则使用带有 background-image: url(path/to/image/file) 设置的背景图像的 div 可能会起作用。