[+] исхищрения

[CEBEP]

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

Необходимо средствами HTML и CSS реализовать без использования дополнительных картинок следующий объект: моноширинный + помещён в рамку толщиной 2px и расстояние между хвостиками плюса и рамкой 2px. Также для достижения большей универсальности заготовки полезно будет добиться того чтобы объект не реагировал на изменение размера шрифта. Кроме всего прочего необходимо обеспечить возможность не затруднительного (копипастой) добавления такого объекта непосредственно после текста.

[stars]

ну и в чем проблема взять этот самый плюсик в <span> задать размер шрифта рамку и падинг?

[CEBEP]

отступы будут больше чем нужно, а паддинг отрицательный не работает

[Нет]

CEBEP, положение элемента «+» внутри рамки зависит от размера шрифта и того, как каждый конкретный браузер отображает данный шрифт. Добиться во всех браузерах одинакового отображения, равно как и одинакового поведения при увеличении размера шрифта, если «+» является элементом текста, невозможно. В качестве примера попробуйте посмотреть, как следующий код выглядит в разных браузерх и при масштабировании:

HTML:

<p>Lorem ipsum dolor sit amet<em>+</em></p>

CSS:

p em {
  display: inline-block;
  font: bold 120%/55% Arial;
  padding: 3px 2px 1px;
  margin-left: 5px;
  border: 2px solid #000;
}

[CEBEP]

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

Edited October 24, 2010 by CEBEP