Информер курса валют ЦБ РФ   •   Магазин расширений
10 873 просм
1 комм
Поделиться:

Кроссбраузерный значок рубля на CSS

Как известно из различных источников, в недалеком 2013-м году рубль, как и многие другие валюты, обзавелся собственным символом.

Кроссбраузерный значок рубля на CSS

Знак рубля уже внедрили в некоторые шрифты и в HTML-разметку. В HTML, кстати говоря, код символа:

₽ 

или

₽ 

Многие интернет-магазины, да и прочие сайты, связанные с денежными операциями, активно заменяют привычное «Руб», «RUB» и «р.» на новый знак рубля. Но есть одна проблема – не на каждом компьютере существует этот символ, и вместо символа рубля мы наблюдаем следующее:

Кроссбраузерный значок рубля на CSS

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

Сегодня я покажу вам, как с помощью стандартной буквы «Р» и CSS можно получить значок рубля, который будет отображаться на всех устройствах правильно, как это и должно быть.

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

<span class="rub">Р</span>

2. Затем напишем для нее небольшой стиль:

.rub { 
	line-height: 5px;
	width: 0.4em;
	border-bottom: 1px solid #000; 
	display: inline-block;
} 

Сохраняем и смотрим, что у нас получилось:

Кроссбраузерный значок рубля на CSS

По-моему – очень неплохо. По желанию можете изменить размеры горизонтальной полосы, ее цвет и положение относительно буквы «Р».

«Pandoge» - помощник веб-мастера
1
комментарий
21.06 в 11:53

Такой вариант кросбраузернее

.rub{

font-size:inherit;

margin:0 2px;

color:inherit;

position:relative;

}

.rub:after{

content:"";

position:absolute;

display:inline-block;

width:80%;

height:8%;

top:auto;

bottom:25%;

left:-5%;

background:blue;

}

  • 1
Гостям запрещено участвовать в обсуждениях сайта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Подняться наверх