Question

我正在使用react.js的HTML到JSX转换器，这里演示了：

http://facebook.github.io/react/html-jsx.html

并注意到一种奇怪的行为。

翻译此代码时

：

<div style="font-size:14px; line-height:14px">Hello world</div>

返回短语中的翻译是：

<div style={{fontSize: 14, lineHeight: 14}}>Hello world</div>

请注意＆＃34; px＆＃34;被丢弃了。现在虽然使用＆＃34; fontSize＆＃34;功能，＆＃34; lineHeight＆＃34;在css中，行为完全不同，14行的高度与14px完全不相同。

任何建议的解决方法或解释都将受到高度赞赏。

Answer 1

这是一种已知的行为，可能是一个错误。但是，MDN不鼓励使用line-height的单位指定值。

因为您已经为该元素指定了font-size（并且因为它正确地解析了它），所以您实际上不需要使用px - line-height的值，因为它会然后引用元素'font-size属性。

使用的值是无单位number乘以元素的字体大小。计算的值与指定的number相同。在大多数情况下这是设置行高的首选方式，在继承的情况下没有意外结果。

相反，只需：

<div style="font-size:14px; line-height:1">Hello world</div>

这与将line-height设置为14px具有相同的效果。

修改

似乎你可以通过14px !important来绕过这个问题。如果你真的需要使用px。

2016年3月8日更新

从React v15.0开始，你不应再面对这个问题了。根据{{3}}：

React DOM：将无单位CSS值指定为字符串时，将来的版本不会自动添加px。这个版本现在在这种情况下发出警告（例如：写作风格=。（无宽度数字值如宽度：300不变。）

HTML到jsx转换器不保留css单位

1 个答案:

2016年3月8日更新