Граница обрезается в Chrome, но не IE или Edge - PullRequest
Новая
       5

Граница обрезается в Chrome, но не IE или Edge

0 голосов
/ 29 ноября 2018

Этот CSS & HTML показывает три текстовых поля, которые полностью обернуты в свои границы при просмотре в IE и Edge.При просмотре в Chrome (или в браузере моего Android) правая сторона границы обрезается.

Я могу заставить это работать, добавляя "" в конце каждого диапазона, но лучше узнать,делаю что-то не так ... 

<html>
<body>
<style>
.link-bubble {
    float:none;
    white-space:nowrap;
    border: thin solid blue;
    border-radius:10px;
    background-color:antiquewhite;
    padding:4px 6px 6px 6px;
    margin:2px;
}
</style>
<div style="float:right; width:30%; text-align:center; line-height:40px;">
    <span class="link-bubble">
        <a href="/Services/target1">First service offered</a>
    </span>
    <span class="link-bubble">
        <a href="/Services/target2">Second service offered</a>
    </span>
    <span class="link-bubble">
        <a href="/Services/target3">Third service offered</a>
    </span>
</div>
</body>
</html>

1 Ответ

0 голосов
/ 29 ноября 2018

Я не уверен на 100%, почему происходит такое специфическое поведение и расхождения между браузерами, но я бы поспорил, что это связано с white-space:nowrap и родительскими элементами width: 30%, а также с некоторыми странностями.

Вместо того, чтобы обойти эту причуду, гораздо более простой способ сделать это - изменить display из .link-bubble с inline на block.Вы можете сделать это с помощью display: block в классе или просто изменить элементы с span на div или другие элементы блока. Вот хорошее прочтение на блочной модели - Я бы также порекомендовал прочитать на css flexbox и grid, гораздо более простой и современный способ обработки позиционирования элементов по сравнению с divs и float.

Кроме того, если вам действительно нужен white-space: nowrap, добавьте этот стиль во внутренний элемент.Смотрите мой пример ниже. 

<html>
<body>
<style>
.link-bubble {
overflow: hidden;
border: thin solid blue;
border-radius:10px;
background-color:antiquewhite;
padding:4px 6px 6px 6px;
display: block;
margin: 2px;
}

.link-bubble a { white-space: nowrap; }
</style>
<div style="float:right; text-align:center; width: 30%; line-height: 40px;">
    <span class="link-bubble">
        <a href="/Services/target1">First service offered</a>
    </span>
    <span class="link-bubble">
        <a href="/Services/target2">Second service offered</a>
    </span>
    <span class="link-bubble">
        <a href="/Services/target3">Third service offered</a>
    </span>
</div>
</body>
</html>
...