在 Chrome 上設置 dt 元素副作用的字體

Question

當float: left用於將術語及其定義定位在同一行時，我在 Chrome 上為定義列表設置字體時看到了奇怪的效果。 這個小提琴說明了這種情況： https://jsfiddle.net/h6vp2knz/1/ 。

dd元素左側的間距以看似混亂的方式變化。 如果定義足夠長，需要多於一行，則第一行似乎與前一個術語的右側對齊，下一行與定義對應的術語對齊，后續行與左側對齊容器。

如果沒有為術語設置font-family ，或者dt和dd元素都設置為具有相同的字體，那么一切看起來都如我所料：無論定義有多長，它都會在術語之后立即開始，並且所有后續行都開始從容器的左側。 這也是我在 Firefox 上看到的。

我無法找出是什么導致了這種行為，但我很想知道這是怎么回事，以及為跨瀏覽器的術語和定義設置不同的 fonts 的好方法是什么。