by nemoluca
12. мая 2011 02:37
Работы над ошибками псто.
Как вы уже помните или впервые слышите, то ранее я уже рассматривал проблему с переносом строки и сохранением отступа справа для инлайн-элемента.
Спешу представить на суд истории версию без HTML насилия, а только православный CSS (протестировано на IE7+, FF4, Chrome 11, Opera 11, Safari 5)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="en" lang="en">
<head>
<title>css</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
body {
margin: 10px;
}
div {
width: 250px;
background: #fee;
padding: 4px;
}
a {
font-size: 14px;
line-height: 23px;
padding:6px 4px 6px 0;
text-decoration: none;
background: red;
white-space: pre-wrap;
color: white;
}
span {
display: block;
border-left: 4px solid red;
padding: 3px 0 3px 0;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
a {
word-wrap: break-word;
}
</style>
<![endif]-->
<!--[if IE 9]>
<style type="text/css">
a {
padding:5px 4px 4px 0;
}
</style>
<![endif]-->
<style type="text/css">
@-moz-document url-prefix() {
a {
padding:5px 4px 4px 0;
}
}
</style>
</head>
<body>
<div>
<span><a href="#">В Париже запретили рекламу фильма о Коко Шанель</a></span>
</div>
</body>
</html>