Удаляя недопустимый HTML, я могу продублировать проблему, так что это явно означает, что недопустимый HTML не является причиной:)
Кажется, это проблема с элементами в стиле inline-block с переполнением, установленным вничего, кроме видимого.Посмотрите на этот простой пример:
<html>
<head>
<style>
span
{
display: inline-block;
border: 1px solid red;
margin: 0;
padding: 0;
width: 50px;
}
#b
{
overflow-x: hidden;
}
</style>
</head>
<body>
<span id="a">test</span>
<span id="b">test2test2test2test2test2test2test2test2test2test2test2test2test2</span>
</body>
</html>
Второй диапазон показывает, как вы описываете.Однако, если вы измените эти промежутки на display: block и поместите их, они будут выровнены вертикально.
Похоже, что это ошибка в двух браузерах, где она работает не так, как ожидалось.К сожалению, я не думаю, что есть способ исправить это так, как вы это делаете сейчас, но вы должны быть в состоянии переделать свои стили, используя плавающие элементы, чтобы получить тот же общий вид для этого блока.