Question

以下HTML在Chrome中正确显示，但在IE中则无法显示。按钮文字被截断。

<HTML>
   <HEAD>
      <TITLE>Button test</TITLE>
      <STYLE type="text/css">
      p { padding-left: 2em; text-indent: -2em }
      </STYLE>
   </HEAD>
   <BODY>
   <DIV style="margin-left: 0.5in; margin-right: 0.5in">First line<P>Second line<BUTTON>Button will be clicked</BUTTON>
   </DIV>
   </BODY>
</HTML>

p样式条目背后的想法是我希望段落出现在剩余行左边的第一行。我已将此缩减为最小的示例，但通常会为BUTTON设置onclick事件。

Answer 1

我发现在IE中，如果BUTTON发生在P内，则段落元素的text-indent属性由BUTTON继承，导致它将文本移到左侧，使其中一些文本从按钮上掉落。这可以通过将style="text-indent: 0"添加到BUTTON或将其添加到样式表来解决：

  button { text-indent: 0 }

按钮文字在IE中被切断

1 个答案: