Как избежать подчеркивания в виде пробелов без изменения стиля кодирования?

Ответ 1

Вы можете эмулировать эффект с помощью CSS:

img {
    border: 1px solid #CCC;
    padding: 10px;
    vertical-align: middle;
    float:left;
}

a {
    display:block;
    height:70px;
    line-height:70px;
}

http://jsfiddle.net/DNhAk/8/

Ответ 2

Вы можете установить CSS для элемента a следующим образом:

a {
    display: inline-block;
}

Ответ 3

Поведение, которое вы испытываете, является частью спецификации (http://www.w3.org/TR/html401/struct/text.html):

Для всех HTML-элементов, кроме PRE, последовательности белого пространства разделяют "слова" (мы используем термин "слово" здесь для обозначения "последовательностей небелых пробелов" ). При форматировании текста пользовательские агенты должны идентифицировать эти слова и выкладывать их в соответствии с соглашениями конкретного письменного языка (script) и целевого носителя.

This layout may involve putting space between words (called inter-word space), but conventions for inter-word space vary from script to script. For example, in Latin scripts, inter-word space is typically rendered as an ASCII space ( ), while in Thai it is a zero-width word separator (​). In Japanese and Chinese, inter-word space is not typically rendered at all.

Итак, добавив в свою разметку элемент (img), за которым следует пробел (новая строка), вы указали, что агенты интерпретируют ваше изображение как "слово" и добавляют пробелы в зависимости от языка, на котором установлен агент. вы хотите удалить это пробел из результата, вам нужно будет удалить его из разметки.

В качестве альтернативы вы можете полностью удалить изображение из своей разметки и поместить его в качестве фона на якорь, тем самым исключая любые фрагменты презентации из вашей разметки. Пример здесь:

<a href='#' class="imglink">
There is
<em>no</em>
underlined whitespace at beginning of this text</a>

CSS

.imglink {
min-height: 50px;
background: transparent url("http://www.cadcourse.com/winston/Images/SoccerBall.jpg") no-repeat;
background-size: 50px 50px;
display: block;
padding-left: 55px;
line-height: 50px
}

Конечно, есть некоторые недостатки в этом методе, но это потенциальное решение в зависимости от ваших других ограничений.

http://jsfiddle.net/hellslam/pvHK8/

Ответ 4

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

<a href='#'>
<img src='SoccerBall.jpg'/> <span>Your text</span>
</a>

CSS:

a{text-decoration:none;}
a>span{text-decoration:underline;}

Ответ 5

Используйте две отдельные ссылки для разных элементов, находящихся внутри текущего. Я еще не видел исправление CSS. Это потому, что вся область считается ссылкой, очевидно. Этот обходной путь работает с тех пор.

<a href='#'>
<img src='http://www.cadcourse.com/winston/Images/SoccerBall.jpg'
  width='50' height='50'/>
</a>
<a href='#'>
No Underlined Whitespace
</a>

Ответ 6

Извлеките пространство в привязке между изображением и текстом (это то, что подчеркивается). В вашем css дайте img 'margin-right: 10px' (или любое другое значение, которое вы хотите). Удалите прокладку.

ИЗМЕНИТЬ

Чтобы уточнить:

Вставка символа пробела после того, как изображение не подпадает под "стиль кодирования" - вы специально закодировали пробел в текстовое значение якоря.

CSS ведет себя так, как предполагалось в этом отношении: он строит текстовое содержимое якоря (включая пробел) с подчеркиванием, потому что вы не переопределили это поведение для текстового содержимого в якоре.

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

Я понимаю, что вы спрашиваете, есть ли способ сохранить место в якоре, а также настроить этот символ с помощью CSS - я не думаю, что есть способ сделать это.

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

На самом деле, я подозреваю, что цель этого символа пространства более ориентирована на презентацию, чем семантика.

Изменение HTML для целей презентации не является идеальным, но, как правило, это не изменение HTML-кода - это изменение значения, которое вы передаете с помощью HTML. В этом случае я считаю совершенно правильным изменить свой HTML, чтобы передать тот же смысл.

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

Ответ 7

Я, конечно, согласен с вашим вопросом и считаю, что это хорошо продумано и поднимает очень хороший момент. Как указано в этом вопросе fooobar.com/questions/31876/..., существует экспериментальное свойство CSS3, называемое text-space-collapse, который предложил значения discard, trim-inner, trim-before and trim-after, которые все могут быть использованы для решения этой проблемы.

Я думаю, что лучшее решение, которое вы собираетесь найти до тех пор, пока text-space-collapse не будет реализовано, будет слегка изменить вашу разметку. Вы можете обернуть текст в промежутке, а затем использовать display: table как одно решение.

http://jsfiddle.net/CPh82/

a { display:table; }

a > * { display: table-cell; vertical-align: middle; }

<a href='#'>
    <img src='http://www.cadcourse.com/winston/Images/SoccerBall.jpg' width='50' height='50'/>
    There is underlined whitespace at beginning of this text
</a>

Ответ 8

вместо заполнения, попробуйте марку

img {
    border: 1px solid #CCC;
    margin: 10px;
    vertical-align: middle;   
}​