Пространство между элементами span в IE11

Прежде чем вы проигнорируете этот вопрос, так как удаление пробела между элементами span поможет мне, позвольте мне заверить вас, что эта конкретная проблема немного отличается.Пространство между элементами span в IE11

Проблема. Между элементами диапазона существует очень небольшой промежуток, который встречается только в IE11 только на определенной ширине экрана, что BTW не является проблемой из-за пробелов между элементами span.

Код:

  <table width="100%" height="50" cellspacing="0" cellpadding="0"> 
       <tbody> 
       <tr height="15"> 
        <td nowrap="nowrap" style="text-align: center;"> 
         <button > 
         <span class="buttonLeft"></span><span class="buttonMiddle"><span class="buttonText" >Reset Page</span></span><span class="buttonRight"></span> 
         </button> 
        </td> 
       </tr> 
       </tbody> 
      </table>

код:

button { 
    background: none; 
    border:none; 
} 
.buttonLeft, .buttonMiddle, .buttonRight { 
    background-color: #23609D; 
    height: 20px; 
    vertical-align: middle; 
    padding-top: 2px; 
    height: 22px; 
    display: block; 
    float: left; 
} 
.buttonRight, .buttonLeft { 
    width: 10px; 
} 
.buttonLeft { 
    border-top-left-radius: 3px; 
    border-bottom-left-radius: 3px; 
} 
.buttonRight { 
    border-top-right-radius: 3px; 
    border-bottom-right-radius: 3px; 
} 
.buttonText { 
    white-space: nowrap; 
    color: #fff; 
    font-size: 12px; 
    cursor: pointer; 
    display: block; 
    margin-top: 2px; 
}

Вот скрипку для того же jsfiddle

Вы можете не заметить этот вопрос на первом, попробуйте повторно проклейки Результат раздел скрипки, вы сможете определить проблему.

Вы можете увидеть результат, как показано ниже.

Issue

Проблема может быть решена путем удаления стиля = «выравнивание текста: центр;»

на td элемент в вышеуказанном коде или путем удаления стилей пограничного радиуса.

Поскольку эта разметка используется во многих местах моего проекта, я действительно не думаю, что изменение разметки - лучший способ обойти.

Я ищу решение для CSS или, если не решение, по крайней мере, причину этого нечетного поведения.

источник

2015-03-26 wh0

почему вам нужно три пролеты для кнопки? – btevfik

@btevfik: Я имею дело с устаревшим кодом. Я не написал этот код. К сожалению, тот же код используется во многих местах проекта. Я не могу изменить разметку. – wh0

Я не думаю, что это можно исправить только при изменении css. – btevfik

Я просто добавить отрицательный запас 1px для левых и правых пролетов:

span.buttonLeft { 
    border-top-left-radius: 3px; 
    border-bottom-left-radius: 3px; 
    margin-right:-1px; 
} 
span.buttonRight { 
    border-top-right-radius: 3px; 
    border-bottom-right-radius: 3px; 
    margin-left:-1px; 
}

И добавить отступы к вашему пролету .buttonText, чтобы дать 1px бесплатно вокруг текста:

span.buttonText { 
    display: block; 
    margin-top: 2px; 
    padding:0 1px; 
}

Это решение работает, даже если это не чистый способ сделать. Что здесь происходит ? 2 SPAN перекрываются на среднем (1px).

(К сожалению, JSFiddle, кажется, выходит из строя, поэтому я не могу предоставить живую демо)

источник

2015-03-26 08:58:07 EdenSource

Пространство между элементами span в IE11

ответ

Смежные вопросы