Параграф: зависание не работает должным образом в Chrome

Question

Я создал правило <p> css, но оно не работает должным образом в Chrome.В Edge поведение правила <p> правильное:

• По умолчанию абзац является блочным элементом, и при наведении на него указателя мыши возникает независимо от объема текста на<p>

• В Chrome мне нужно навести курсор мыши на текст <p>, чтобы вызвать псевдокласс :hover

  .hidden-controls .control {display: никто;}

  .hidden-control: hover .control {display: inline-block;}

Итак, учитывая этот HTML-код:

<p class='table-row elegant hidden-controls'>
    ✔&nbsp;{{name}}&nbsp;&nbsp;&nbsp;&nbsp; 
    <input type='button' onclick='RemoveStakeholder(0);' class='pretty small-font-size control vertical-align-middle' title='Remove' value='Remove' />&nbsp; 
    <input type='button' onclick='EditStakeholder(0, this);' class='pretty small-font-size control vertical-align-middle' title='Edit' value='Edit' />&nbsp;
    <input type='button' onclick='MoveStakeholder(0, "M" );' class='pretty small-font-size control vertical-align-middle' title='Move to missing' value='✖' />
</p>

В Chrome он срабатывает только тогда, когда я помещаю курсор на текст.Есть ли исправление или обходной путь?Или это просто проблема с webkit?

Я проверил это с помощью Explorer и Edge, и он отлично работает.

JSFiddle: https://jsfiddle.net/afnchaz7/3/

Answer 1

Нет различий в поведении для Chrome или Firefox.В обоих случаях параграф получает сжатие свойством display: table.Просто удалите их, и вы получите полную строку.