Шрифт и разные браузеры

gohtwew · August 28, 2010

Сталкнулся с проблемой. В Опере и Фаерфоксе текст отображается поразному, из-за этого в Опере текст съезжает и не помещается в таблицы как задумано.

Подскажите как с этим бороться. Если можно с примерами.

Спасибо.

swetlana · August 28, 2010

я Вам скажу больше:

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

Так что правильным решением будет дать шрифту свободу, а не загонять его в непонятные рамки.

Ну и на всякий случай покажите страничку, на которой такая беда творится.

gohtwew · August 28, 2010

У меня форум PunBB.

Для примера, http://punbb.informer.com/forums/, выглядит в Фаерфоксе намного лучше чем в Опере, а так же видно что шрифт другой и он красиво поместился в табличку. Из-за этого у меня на форуме порой съезжают таблички из под Оперы.

http://img831.imageshack.us/img831/115/daaa.gif

Вот CSS моего форума:


html, body, /* remove this line if necessary for site integration */
.brd div, .brd p, .brd dl,.brd dt,.brd dd, .brd ul, .brd ol, .brd li,
.brd h1,.brd h2,.brd h3, .brd h4, .brd h5, .brd h6, .brd pre,
.brd form, .brd fieldset, .brd legend, .brd blockquote,
.brd table, .brd th, .brd td {
	margin:0;
	padding:0;
	text-align: left;
	}

.brd fieldset, .brd img, .brd cite {
	border: 0;
	}

.brd br, .brd hr, .brd .hr, .brd .hidden {
	display: none;
	}

.brd table {
	width: 100%;
	table-layout: fixed;
	empty-cells: show;
	}

/* Text Setup (Equalise everything before styling)
————————————————————-*/

body {
	font-size: 100%;
	}

.brd-page {
	font: 75%/1.5em Verdana, Helvetica, Arial, sans-serif;
	}

.brd h1,.brd h2,.brd h3, .brd h4, .brd h5, .brd h6 {
	font-size: 1em;
	font-weight: normal;
	}

.brd samp, .brd code, .brd pre, .brd option, .brd optgroup,
.brd input, .brd select, .brd textarea, .brd td, .brd th {
	font-size: 1em;
	font-family: Verdana,Helvetica,Arial,sans-serif;
	font-style: normal;
	font-weight: normal;
	}

/* Float Clearing
————————————————————-*/

.brd-page:after,
.brd .gen-content:after,
.brd .ct-box:after,
#brd-index .item-head:after,
#brd-index .main-item:after,
#brd-index ul.item-info:after,
.brd .frm-group:after,
.brd .mf-set:after,
.brd .sf-set:after,
.brd .mf-box:after,
.brd .sf-box:after,
.brd .mf-item:after,
.brd .txt-set:after,
.brd .txt-box:after,
.brd .frm-form label:after,
.brd fieldset:after,
.brd span.fld-input:after,
.brd .posthead:after,
.brd .postbody:after,
.brd .postfoot .post-options:after {
	content: "";
	display: block;
	font-size: 0;
	height: 0;
	line-height: 0.0;
	overflow:hidden;
	visibility: hidden;
	clear: both;
	}

/* Hidden items
————————————————————-*/

#brd-stats .hn,
#qjump label,
.brd .post .post-byline span,
.brd .post .posthead .post-link span,
.admin .main-subhead,
.brd .main-item .item-info li span.label,
.brd .main-item .item-info li label,
.brd .main-item .you-posted,
.brd .main-item .item-num,
.brd .group-legend,
.brd .group-legend span,
.brd .sf-set legend,
.brd .sf-set legend span,
.brd .main-pagehead .page-info,
.brd p.item-select label,
.brd .mf-extra .mf-field label,
.brd .mf-extra .mf-field .aslabel,
.brd .item-subject .item-nav span,
.brd .post-options a span,
.brd .main-title,
.brd .main-head .hn small,
.brd .entry-title,
.brd .menu-page .main-head {
	font-size: 0;
	left: -999em;
	text-indent: -999em;
	position:absolute;
	line-height: 0em;
	visibility: hidden;
	}


/*************************************************************
B - GLOBAL STYLES
**************************************************************/

/* General Layout
————————————————————-*/

.brd {
	padding: 1.3em 2em;
	margin: 0 auto;
	max-width: 1100px;
	min-width: 700px;
	width: 90%;
	}

#brd-redirect, #brd-maint, #brd-util {
	margin: 50px auto 12px auto;
	width: 60%;
	}

.brd-page { /* Confines clearing behaviour within forum wrapper */
	float: left;
	width: 100%;
	position: relative;
	}

.brd .main-content, .brd .gen-content {
	border-style: solid;
	border-width: 1px;
	}

.brd .gen-content {
	padding: 0 1.5em;
	}

#brd-index #brd-about, #brd-index #brd-stats {
	margin-top: 1em;
	}

.brd .main-content,
#brd-index #brd-visit, #brd-qpost,
#brd-index #brd-announcement {
	margin-bottom: 1em;
	}

.brd #brd-announcement {
	padding: 0.5em 1.5em;
	margin-top: 1em;
	/*margin: 0em 0em 1em 0em;*/
	}

.brd #brd-announcement br {
	display: inline;
	}

.brd .main-options {
	border-top: none;
	margin: -1em 0 1em 0;
}

/* Content Text (Default spacing for paragraphs and lists)
————————————————————-*/

.brd p, .brd .hn {
	padding: 0.5em 0;
	}

.brd  ul, .brd ol {
	padding: 0.5em 0 0.5em 2em;
	}


.brd ul.spaced {
	padding: 0.25em 0 0.25em 2em;
	}

.brd ul.spaced li {
	padding: 0.25em 0;
	}

/* Headings
————————————————————-*/

.brd th {
	font-size: 1.084em;
	padding: 0.462em 1.417em;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	}

.brd .main-head, .brd .main-foot {
	border-style: solid;
	border-width: 0.8px;
	padding: 0 1.417em;
	}

.brd .main-head .hn, .brd .main-foot .hn {
	font-size: 1.084em;
	padding-right: 10em;
	}

.brd h2.main-subhead {
	border-style: solid;
	border-width: 1px;
	font-size: 1.084em;
	padding: 0.462em 10em 0.426em 1.417em;
	}

.brd .column-title {
	border-style: solid;
	border-width: 1px;
	position: relative;
	margin-bottom: -1px;
	}

.brd .main-subhead {
	border-style: solid;
	border-width: 1px;
	border-bottom: none;
	}

.brd .main-subhead .hn {
	font-size: 1.084em;
	padding: 0.462em 1.417em;
	position: relative;
	}

.brd .main-foot {
	margin-top: -1em;
	}

.brd #brd-announcement h1, .brd .main-extensions .ct-legend, .brd .main-hotfixes .ct-legend {
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	font-size: 1.1em;
	font-weight: bold;
	}

.brd #brd-announcement h1 {
	margin-bottom: 0.5em;
	}

.brd .main-pagehead .hn {
	padding: 0.5em 0;
	}

.brd .content-head {
	margin: 0.5em 1.417em 0;
	}

.brd .content-head .hn {
	font-size: 1.084em;
	border-style: none none double none;
	border-width: 3px;
	padding: 0.462em 0;
	}


/*************************************************************
C - COMMON CONTENT TYPES (RE-USABLE FORMATS)
**************************************************************/

/* Option lists
————————————————————-*/

.brd .options span {
	padding: 0 0 0 0.5em;
	margin: 0 0 0 0.5em;
	}

.brd .options span.first-item {
	border-left: 0;
	padding-left: 0;
	margin-left: 0;
	}

.brd .extension .options, .brd .hotfix .options {
	border-top-style: dashed;
	border-top-width: 1px;
	}

/* Content Containers
————————————————————-*/

.brd .ct-box {
	border-style: solid;
	border-width: 1px;
	margin: 1.417em;
	padding: 0.5em 1em;
	position: relative;
	}

.brd .ct-box li {
	padding: 0;
	margin: 0 0 0.7em 0;
	}

.brd .ct-set {
	border-style: solid;
	border-width: 1px;
	margin: 1.417em;
	padding: 0 0 0 17em;
	position: relative;
	}

.brd .ct-group {
	border-style: solid;
	border-width: 1px;
	margin: 1.417em;
	}

.brd .frm-group .ct-set {
	border-style: dashed none none none;
	margin: 0;
	}

.brd .ct-group .ct-set {
	border-style: dashed none none none;
	margin: 0 1em;
	padding: 0 0 0 16em;
	}
.brd .ct-group .group-item1 {
	border: none;
	}

.brd .ct-group .set1, .brd .frm-group .set1 {
	border-top: none;
	}

.brd .ct-group .ct-box, .brd .frm-group .ct-box {
	border-style: none;
	margin: 0;
	}

.brd .ct-group .ct-set .ct-box, .brd .ct-set .ct-box,
.brd .frm-group .ct-set .ct-box {
	border-style: none;
	margin: 0;
	}

.brd .ct-group .set1 {
	border-top: 0;
	}

.brd .ct-set .ct-legend {
	float: left;
	margin-left: -17em;
	width: 16em;
	display: inline;
	position: relative;
	text-align: right;
	font-weight: bold;
	}

.brd .ct-set ul {
	padding-left: 0;
	list-style: none;
	}

.brd .ct-box div {
	padding: 0.5em 0;
	}

.brd .ct-box p.options {
	float: none;
	}

.brd .ct-box .info-list {
	padding-bottom: 0;
	}

 /* User Identity
————————————————————-*/

.brd .user-ident {
	padding-left: 0;
	list-style: none;
	}

.brd .user-ident .username a,
.brd .user-ident .username strong {
	font-size: 1.167em;
	font-weight: bold;
	}

.brd .user-ident .username a,
.brd .user-ident .username a:link,
.brd .user-ident .username a:visited {
	text-decoration: none;
	}

.brd .user-ident .username a:hover,
.brd .user-ident .username a:active,
.brd .user-ident .username a:focus {
	text-decoration: underline;
	}



 /* Message Boxes
————————————————————-*/

.brd .main-message {
	padding: 0.5em 1.417em;
	}

.brd .main-message p span {
	display: block;
	padding-top: 0.5em;
	}

/* Section Menus (By Default - Profile and Admin)
————————————————————-*/

.brd .main-menu, .brd .admin-menu {
	border: 0;
	padding: 0.4em 0 0.2em 0.75em;
	}

.brd .main-menu ul, .brd .admin-menu ul {
	list-style-type: none;
	float: left;
	padding: 0;
	}

.brd .main-menu li, .brd .admin-menu li {
	font-size: 1.084em;
	float: left;
	display: inline;
	}

.brd .main-menu a, .brd .admin-menu a {
	float: left;
	position: relative;
	padding: 0.2em 0.75em 0.4em 0.75em;
	}

.brd .main-menu li.active a, .brd .admin-menu li.active a {
	font-weight: bold;
	}

.brd .main-menu li.first-item, .brd .admin-menu li.first-item {
	border-left: 0;
	}

.brd .admin-submenu {
	border-style: solid;
	border-width: 0px 1px 0px 1px;
	}

.brd .admin-submenu ul {
	padding: 0.5em 0;
	list-style: none;
	}

.brd .admin-submenu li {
	display: inline;
	margin-right: 0.75em;
	}

/*************************************************************
D - COMMON INTERFACE ELEMENTS
**************************************************************/

/* Logo and Tagline
————————————————————-*/

#brd-head {
	padding-bottom: 0.75em;
	padding-top: 1em;
	}

#brd-title {
	padding-bottom: 0;
	}

#brd-title a, #brd-title strong {
	font-size: 1.5em;
	text-decoration: none;
	font-weight: normal;
	}

#brd-desc {
	font-size: 1.084em;
	padding-top: 0;
	padding-bottom: 0;
	}

/* Primary navigation
————————————————————-*/

#brd-navlinks ul {
	margin: 0;
	padding: 0.5em 0;
	float: left;
	}

#brd-navlinks li {
	display: inline;
	margin-right: 1em;
	}

#brd-navlinks li a {
	font-size: 1.167em;
	text-decoration: none;
	}

#brd-admod {
	float: right;
	text-align: right;
	}

#brd-admod span {
	margin-left: 0.75em;
	}

#brd-access {
	text-align: right;
	padding: 0;
	height: 0;
	margin: 0;
	position: absolute;
	background: transparent;
	}

#brd-access a, #brd-access a:link, #brd-access a:visited {
	height: 2em;
	padding: 0 1.3em;
	line-height: 2em;
	position: absolute;
	left: -999em;
	margin: 1px;
	width: 12em;
	}

#brd-access a:hover, #brd-access a:active, #brd-access a:focus {
	text-indent: 0;
	background: #000;
	position: static;
	float: right;
	}


/* Welcome box
————————————————————-*/

#brd-visit #welcome {
	float: left;
	}

#brd-visit #visit-links {
	text-align: right;
	float: right;
	}

/* Paging and posting
————————————————————-*/

#brd-pagepost-end {
	border-top: none;
	}

#brd-pagepost-top {
	border-bottom: none;
	}

.brd .paging {
	float: left;
	}

.brd .posting {
	text-align: right;
	float: right;
	}

.brd .paging, .brd .paging * {
	white-space:nowrap;
	}

.brd .paging a, .brd .paging strong, .brd .paging span {
	padding: 0 1em;
	border-left-style: solid;
	border-left-width: 1px;
	float: left;
	}

.brd .paging .first-item, .brd .paging span.pages {
	border-left: 0;
	padding-left: 0;
	}

.brd .posting .newpost {
	font-size: 1.084em;
	font-weight: bold;
	}

/* Breadcrumbs
————————————————————-*/

.brd .crumbs .crumblast {
	font-weight: bold;
	}

.brd .crumbs .crumblast  span {
	font-weight: normal;
	}

.brd .crumbs span, .brd crumbs span * {
	white-space: nowrap;
	}

.brd .crumbs {
	margin: 0.5em 0em;
	padding: 0em 1.417em;
	font-size: 1.084em;
	}

/* Statistics
————————————————————-*/

#brd-stats {
	border-bottom: 0;
	}

#brd-stats ul {
	list-style: none;
	padding-left: 0;
	}

#brd-stats ul li.st-users {
	float: left;
	clear: both;
	white-space: nowrap;
	}

 #brd-stats ul li.st-activity {
	text-align: right;
	display: block;
	white-space: nowrap;
	}

 #brd-stats li strong {
	font-weight: bold;
	}

#brd-online {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	}

#brd-online .hn, #brd-online p {
	padding-bottom: 0;
	padding-top: 0;
	}

 #brd-online .hn {
	float: left;
	margin-right: 0.5em;
	}

/* Footer
————————————————————-*/

#brd-about #qjump {
	float: left;
	padding: 0.5em 0;
	}

#brd-about #qjump div, #qjump label {
	padding: 0;
	border: none;
	}

#brd-about #copyright {
	text-align: right;
	margin: 0;
	}

#querytime {
	text-align: center;
	font-size: 0.9em;
	}

#extensions-used {
	border-bottom: 1px dotted;
}

/* Main and Content Options
————————————————————-*/

.brd p.options {
	border-top: none;
	float:right;
	}

.brd .main-modoptions .options {
	text-align: center;
	}

.brd a.feed {
	padding-left: 22px;
	background: url(feed-icon.png) center left no-repeat;
	}

.brd .content-options, .brd .ct-options {
	float: right;
	margin-top: -2.7em;
	padding: 0.5em 1.417em;
	position: relative;
	}

.brd #select-all {
	float: right;
	padding-left: 1em;
	}

/*************************************************************
E - INDEX, FORUMS, SEARCH RESULTS, MODERATE FORUMS
**************************************************************/

/* Header setup generally
————————————————————-*/

.brd .item-summary {
	height: 2.3em;
	padding: 0;
	position: relative;
	font-size: 1em;
	}

.brd .item-summary span {
	width: 100%;
	position: absolute;
	left: -999em;
	text-indent: -999em;
	display: block;
	}

.brd .item-summary strong {
	position: absolute;
	left: 999em;
	text-indent: 0;
	padding: 0.5em 0;
	white-space: nowrap;
	font-weight: normal;
	}

.brd .item-summary strong:first-letter {
	text-transform: uppercase;
	}

.brd .item-summary .subject-title {
	padding-left: 1.417em;
	}

.brd .item-summary .info-topics,
.brd .item-summary .info-replies {
	margin-left: 100%;
	text-align: center;
	width: 7em;
	left: 965em;
	}

.brd .item-summary .info-forum {
	margin-left: 100%;
	text-align: center;
	width: 20em;
	left: 952em;
	}
.brd .item-summary .info-posts,
.brd .item-summary .info-views {
	margin-left: 100%;
	text-align: center;
	width: 7em;
	left: 972em;
	}

.brd .item-summary .info-lastpost {
	margin-left: 100%;
	left: 980em;
	}

.brd p.forum-noview .info-replies {
	left: 972em;
	}

/* Content setup generally
————————————————————-*/

.brd .main-content .main-item {
	border-top-style: solid;
	border-top-width: 1px;
	overflow: hidden;
	position: relative;
	line-height: 1em;
	}

.brd .main-content .main-first-item {
	border-top: none;
	}

.brd .main-content .main-item ul {
	float: right;
	position: relative;
	padding: 0;
	list-style: none;
	}

.brd .main-content .main-item p,
.brd .main-content .main-item .hn {
	padding: 0;
	}

.brd .main-content .main-item .hn .item-status {
	font-weight:normal;
	}

.brd .main-content .main-item .hn .item-status em {
	font-style:normal;
	}

.brd .main-content .main-item .item-subject,
.brd .main-content .main-item li {
	float: left;
	border-left-style: solid;
	border-left-width: 1px;
	margin: 0 -2px -9.7em 0;
	position: relative;
	padding-top: 0.6em;
	padding-bottom: 10.4em;
	}

.brd .main-content .main-item .item-subject {
	overflow: hidden;
	width: 100%;
	}

.brd .main-content .main-item li.info-topics,
.brd .main-content .main-item li.info-forum,
.brd .main-content .main-item li.info-posts,
.brd .main-content .main-item li.info-views,
.brd .main-content .main-item li.info-replies {
	width: 7em;
	text-align: center;
	}

.brd .main-content .main-item li.info-forum {
	width: 20em;
	}

.brd .main-content .main-item li.info-lastpost {
	width: 20em;
	}

.brd .main-content .main-item li.info-lastpost cite {
	overflow: hidden;
	width: 18em;
	}

.brd .main-item li strong {
	font-weight: normal;
	}


/* Setup for Index and Forums
————————————————————-*/

.brd .main-content .main-item {
	padding-right: 35em;
	padding-left: 3.75em;
	}

.brd .main-content .main-item .hn {
	position: relative;
	}

.brd .main-content .main-item ul {
	width: 34em;
	right: -35em;
	margin-left: -34em;
	}

.brd .forum-noview .main-item {
	padding-right: 28em;
	}

.brd .forum-noview .main-item ul {
	width: 27em;
	right: -28em;
	margin-left: -27em;
	}

.brd .forum-forums .main-item {
	padding-right: 48em;
	}

.brd .forum-forums .main-item ul {
	width: 47em;
	right: -48em;
	margin-left: -47em;
	}

.brd .main-content .main-item .item-subject span.modlist {
	display: block;
	}

.brd .main-content .main-item .hn strong {
	font-size: 1em;
	}

.brd .main-content .main-item .hn strong span {
	font-weight: normal;
	}

 #brd-index .main-content .main-item .hn span {
	font-size: 1.084em;
	font-weight: bold;
	}
#brd-index .main-content .main-item .hn small {
	font-size: 1em;
	}

.brd .main-content .main-item .item-status {
	font-weight: bold;
	}

.brd .main-content .main-item cite {
	font-style: normal;
	}

.brd .main-content .main-item span.item-nav,
.brd .main-content .main-item span.item-nav * {
	white-space: nowrap;
	font-style: normal;
	}

.brd .main-content .main-item .item-subject .hn,
.brd .main-content .main-item .item-subject p {
	margin: 0 0 0 1.5em;
	}



.brd .main-content .main-item li.info-lastpost strong {
	padding: 0 0 0 1em;
	font-style: normal;
	font-weight: normal;
	}

.brd .main-content .main-item li.info-select {
	position: absolute;
	right: 0;
	top: 0;
	padding: 0.3em;
	border-style: none none solid solid;
	border-width: 1px;
	}

.brd .main-content .main-item .icon {
	border-style: solid;
	border-width: 0.5833em;
	height: 0;
	width: 0;
	float: left;
	margin-top: 0.667em;
	margin-left: -2.417em;
	}

.brd .main-content .main-item .hn .posted-mark {
	position: absolute;
	font-size: 2em;
	width: 1em;
	left: -0.5em;
	top: 0;
	}

/*************************************************************
F - MAIN CONTENT - FORMS
**************************************************************/

/* Generally
————————————————————-*/

.brd .frm-group {
	border-top-style: dashed;
	border-top-width: 1px;
	margin: 1.417em;
	padding: 1.3em 0pt 0em;
	}

.brd .group1{
	border-top: none;
	padding-top: 0;
	}

.brd .sf-box, .brd .mf-box, .brd .txt-box {
	margin: 1.417em;
	padding: 0.3em 0;
	position: relative;
	}

.brd .sf-set, .brd .mf-set, .brd .txt-set {
	margin: 1.417em;
	padding: 0 0 0 17em;
	position: relative;
	}

.brd .sf-set .sf-box, .brd .mf-set .mf-box, .brd .txt-set .txt-box {
	margin: 0;
	}

.brd .frm-group .sf-set, .brd .frm-group .mf-set, .brd .frm-group .txt-set {
	margin: 0;
	}

.brd .text input, .brd .select select {
	font-size: 1.084em;
	}

.brd .frm-buttons {
	margin: 0.75em 1.417em 1em 1.417em;
	position: relative;
	border-top-style: double;
	border-top-width: 3px;
	padding: 0.8em 0pt 0.3em 18em;
	}

.brd .frm-buttons span.submit {
	margin-right: 0.75em;
	}

.brd span.submit input, .brd span.cancel input {
	overflow: visible;
	padding-left: 0.5em;
	padding-right: 0.5em;
	font-size: 1.084em;
	}

.brd .button-set span.submit {
	padding-left: 1em;
	}

/* Single Field Items (Text, Select, Checkbox)
————————————————————-*/

.brd .sf-box label, .brd .sf-box .aslabel {
	float: left;
	padding: 0;
	}

.brd .sf-set .checkbox label {
	padding: 2px 0 2px 3em;
	}

.brd .sf-set .text label span, .brd .sf-set .select label span, .brd .sf-set .aslabel span {
	float: left;
	margin-left: -17em;
	display: block;
	position: relative;
	padding: 2px 0 2px 1em;
	width: 16em;
	text-align:right;
	font-weight:bold;
	}

.brd .sf-set .checkbox label span {
	float: left;
	margin-left: -18em;
	display: block;
	position: relative;
	padding: 0 0 0 2em;
	width: 16em;
	left: -3em;
	text-align:right;
	font-weight:bold;
	}

.brd .sf-set .text label small, .brd .sf-set .select label small {
	display: block;
	text-align: left;
	position: relative;
	margin: 2em 1em 0 1em;
	font-size: 0.917em;
	}

.brd .sf-set .fld-input {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	padding: 0.3em 1em;
	}

.brd .sf-set .checkbox input {
	margin: 2px 0 2px -0.25em;
	height: 1.55em;
	width: 1.55em;
	}

.brd .sf-set .text input:not([title]) { /* Fixes alignment issue in Safari */
	height: 100%;
	}

.brd .sf-set .sf-short input {
	width: 4em;
	}

.brd .sf-set .sf-short label small {
	font-size: 1em;
	padding: 2px 0;
	margin: 0 1em 0 6.5em;
	}


/* Multi-Field Items (Radio/Checkbox Groups)
————————————————————-*/

.brd .mf-box .mf-item {
	position: relative;
	top: -0.166em;
	padding: 0.25em 0;
	}

.brd .mf-set legend {
	position: absolute;
	height: 0;
	background: transparent;
	}

.brd .mf-set legend span {
	position: absolute;
	left: -17em;
	width: 16em;
	padding: 0.3em 1em;
	margin: 1px 0 2px 0;
	overflow: hidden;
	display: block;
	text-align: right;
	font-weight: bold;
	}

.brd .mf-set legend span em {
	display: block;
	white-space: normal;
	font-style: normal;
	font-weight:normal;
	font-size: 0.917em;
	}

.brd .mf-item .fld-input {
	position: absolute;
	top: 0.25em;
	left: 0;
	display: block;
	padding: 0 1em;
	}

.brd .mf-item input {
	margin: 0 0 0 -0.25em;
	height: 1.55em;
	width: 1.55em;
	}

.brd .mf-item label {
	padding: 0 0 0 3em;
	float: left;
	}

.brd .mf-set .mf-yesno .mf-item {
	width: 10em;
	float: left;
	}

.brd .mf-set .mf-field {
	float: left;
	padding: 0 1em 0 1em;
	border-left: 1px solid #ccc;
	}

.brd .mf-set .mf-field1 {
	border-left: none;
	}

.brd .mf-set .mf-field label, .mf-set .mf-field .aslabel {
	position: absolute;
	top: -2em;
	display: block;
	}

.brd .mf-set .mf-cell .fld-input {
	position: static;
	padding: 0 0 0 1em;
	border-left: 1px solid #ccc;
	}

.brd .frm-hdgroup {
	padding-top: 2em;
	}

/*.brd .frm-hdgroup .set1 {
	border-top-style: solid;
	border-top-width: 1px;
	}*/

.brd .sf-set .sf-box .sf-forum {
	width: 25em;
	}

.brd .mf-set .mf-box .forum-field {
	width: 25em;
	}

/* Multi Checkbox Widget
————————————————————-*/

.brd .checklist {
	min-height: 6em;
	max-height: 9em;
	max-width: 30em;
	overflow: auto;
	border-style: solid;
	border-width: 1px;
	position: relative;
	padding: 0.25em 0.5em;
	margin: 0 1em;
	}

.brd .checklist fieldset {
	height: auto;
	}

.brd .checklist legend,
.brd .checklist legend span {
	font-weight: bold;
	position: static;
	padding: 0;
	height: auto;
	text-align:left;
	}

.brd .checklist .checklist-item {
	position: relative;
	height: auto;
	}

.brd .checklist .checklist-item label {
	display: block;
	padding: 0 0 0 2.25em;
	float: none;
	height: 100%;
	background-color: #fff;
	}

.brd .checklist .checklist-item .fld-input {
	position: absolute;
	left: 0;
	top: 0;
	padding: 0;
	margin: 0;
	}

.brd .checklist .checklist-item input {
	margin: 0;
	height: 1.55em;
	width: 1.55em;
	}


/* Single Field Textareas and Long Inputs (Flexi Width)
————————————————————-*/

.brd .txt-box label {
	float: left;
	}

.brd .txt-set label span {
	float: left;
	margin-left: -17em;
	display: block;
	position: relative;
	padding: 2px 1em;
	width: 16em;
	text-align:right;
	font-weight:bold;
	}

.brd .txt-set label small {
	display: block;
	text-align: left;
	position: relative;
	margin: 0 1em 0 -1px;
	padding: 2px 1em;
	font-size: 0.917em;
	z-index: 100;
	}

.brd .txt-set .txt-input {
	position: relative;
	width: 100%;
	}

.brd .txt-set .fld-input {
	display: block;
	padding: 0 0 0 1em;
	}

.brd .txt-set textarea {
	width: 95%;
	}

/* Error handling
————————————————————-*/

.brd .req-warn {
	display: none;
	}

.brd #req-msg p em, .brd .required label span em {
	font-style: normal;
	font-weight: normal;
	}

.brd .required label span em {
	float: left;
	font-size: 0.917em;
	line-height: 1.2em;
	width: 100%;
	position: relative;
	}

.brd .txt-set .required label span em {
	margin-bottom: -1.2em;
	}

.brd .req-error {
	display: block;
	}

.brd .required label span  {
	font-weight: bold;
	}

/*************************************************************
G - MAIN CONTENT - TOPICS AND PARSED CONTENT
**************************************************************/

/* Structure
————————————————————-*/

.brd .post {
	border-style: solid;
	border-width: 1px;
	position: relative;
	margin: 1.417em;
	margin-top: -1.417em;
	}

.brd .firstpost, .brd .singlepost {
	margin-top: 1.417em;
	}

.brd .main-topic .lastpost {
	border-bottom: 0;
	}

.brd .main-topic .post {
	border-style: solid none;
	margin: 0;
	}

.brd  .main-topic .firstpost {
	border-top: none;
	}

.brd .posthead {
	margin-left: 14em;
	border-style: none none none solid;
	border-width: 1px;
	}

.brd .posthead .hn {
	padding-right: 1.5em;
	padding-left: 1em;
	border-style: none none dashed none;
	border-width: 1px;
	}

.brd .post .posthead .post-byline a,
.brd .post .posthead .post-byline strong {
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	font-style: normal;
color: #00579c;
	}

.brd .post .posthead .post-byline {
	float: left;
	width: 11.5em;
	padding: 0.5em 1em 0.5em 1.5em;
	margin-left: -15em;
	margin-top: -0.5em;
	position: relative;
	left: -1px;
	overflow: hidden;
	}

.brd .posthead .post-num {
	float:right;
	font-weight: bold;
	}

#brd-modtopic .posthead .hn {
	padding-right: 2.7em;
	}

.brd .posthead .post-title {
	padding: 0 1.5em 0.5em 1em;
	margin-top: -1px;
	position: relative;
	}

.brd .posthead .post-title span {
	display: block;
	width: 100%;
	overflow: hidden
	}

.brd .posthead .post-title a {
	font-size: 1em;
	text-decoration: none;
	font-weight: bold;
	}

.brd .posthead .post-title small,
.brd .posthead .post-title small a {
	font-size: 1em;
	font-weight: normal;
	white-space: nowrap;
	}

.brd .posthead p.item-select {
	position: absolute;
	top: 0;
	right: 0.75em;
	height: 2.5em;
	}

.brd .postbody {
	margin-left: 14em;
	position: relative;
	border-left-style: solid;
	border-left-width: 1px;
	padding: 0.5em 1.5em 0 1em;
	clear: both;
	}

.brd .postfoot {
	padding-left: 14em;
	border-top-style: dashed;
	border-top-width: 1px;
	position: relative;
	}

.brd .postfoot .post-options {
	border-left-style: solid;
	border-left-width: 1px;
	}

.brd .postbody .post-author {
	float: left;
	width: 11.5em;
	margin-left: -15em;
	left: -1px;
	position: relative;
	display: inline;
	padding: 0 1em 0.5em 1.5em;
	overflow: hidden;
	margin-top: -1em;
	}


.brd .postbody .post-author ul {
	margin: 0;
	padding: 0 0 0.5em 0;
	list-style: none;
	}

.brd .post .author-ident .username {
	display: none;
	}

.brd .postbody .author-ident .usertitle {
	font-weight: bold;
	line-height: normal;
	}


.brd .postfoot .post-contacts {
	float: left;
	margin-left: -18em;
	width: 15.5em;
	padding: 0.5em 1em 0.5em 1.5em;
	position: relative;
	display: inline;
	left: -1px;
	}

.brd .postfoot .post-actions {
	padding: 0.5em 1.5em 0.5em 1em;
	text-align: right;
	display: block;
	float: right;
	}

.brd .postfoot .post-actions span {
	margin-left: 0.75em;
	}

.brd .postfoot .post-contacts span {
	margin-right: 0.75em;
	}

/* Content
————————————————————-*/

.brd .entry-content {
	padding-bottom: 1em;
	overflow: hidden;
	width: 100%;
	font-size: 1.084em;
	}

.brd .entry-content ol {
	padding-left: 2.5em;
	list-style-type: decimal;
	}

.brd .entry-content ol p,
.brd .entry-content ul p {
	padding: 0;
	}

.brd .entry-content ol.alpha {
	list-style-type: upper-alpha;
	}

.brd .entry-content h5, .brd .entry-content h5 * {
	font-weight: bold;
	font-size: 1.084em;
	padding: 0.5em 0;
	}

.brd .entry-content img {
	vertical-align: text-top;
	}

.brd .entry-content .quotebox,
.brd .entry-content .codebox {
	border-style: solid;
	border-width: 1px;
	margin: 0.75em 1em;
	padding: 1em 0.75em;
	}

.brd .entry-content .codebox code, #brd-debug table .tcl, #brd-debug table .tcr {
	font-family: monospace;
	}

.brd .entry-content blockquote {
	overflow: hidden;
	width: 100%;
	}

.brd .entry-content .quotebox cite {
	display: block;
	font-style: normal;
	font-weight: bold;
	}

.brd .entry-content pre {
	margin: 0;
	max-height: 35em;
	min-height: 2em;
	overflow: auto;
	padding: 0 2% 0.1em 0;
	width: 98%;
	}

.brd .entry-content img {
	max-width: 100%;
	}

.brd .entry-content span.bbu {
	text-decoration: underline;
	}

.brd .entry-content br, .brd .sig-demo br, .brd .user-box br, .brd .main-message br {
	display: inline;
	}

.brd .sig-content {
	padding-top: 1em;
	}

.brd span.sig-line {
	display: block;
	width: 200px;
	border-top-style: solid;
	border-top-width: 1px;
	padding-bottom: 0.5em;
	}


/*************************************************************
H - MAIN TABLES
**************************************************************/

/* Table Cells Widths and Alignment
————————————————————-*/

.brd table {
	width: 100%;
	table-layout: fixed;
	empty-cells: show;
	border-spacing: 0;
	line-height: 1.3333em;
	}

.brd td {
	overflow: hidden;
	vertical-align: middle;
	}

#brd-userlist table .tc0 {
	width: 30%
	}

#brd-userlist table .tc1 {
	width: 20%;
	text-align: left;
	}

#brd-userlist table .tc2 {
	width: 10%;
	text-align: center;
	}

#brd-debug  table .tc1 {
	white-space: normal;
	width: 10%;
	}

#brd-debug table .tcr {
	white-space: normal;
	width: 90%;
	}

#brd-admin-uresults table .tc0,
#brd-admin-iresults table .tc0 {
	width: 45%;
	}

#brd-admin-uresults table .tc1,
#brd-admin-iresults table .tc1,
#brd-admin-iresults table .tc2 {
	width: 20%;
	}

#brd-admin-uresults table .tc2,
#brd-admin-uresults table .tc4 {
	width: 10%;
	text-align: center;
	}

#brd-admin-uresults .tc3 {
	width: 15%;
	}

#brd-admin-uresults td.tc0 span,
#brd-admin-uresults td.tc3 span {
	display: block;
	white-space: nowrap;
	}

#brd-admin-uresults td.tc0 a,
#brd-admin-uresults td.tc3 a {
	font-weight: bold;
	}

#brd-admin-iresults table .tc0 {
	width: 25%;
	}

#brd-admin-iresults table .tc1 {
	width: 25%;
	}

#brd-admin-iresults table .tc2 {
	width: 20%;
	}

#brd-admin-iresults .tc3 {
	width: 30%;
	}


/* Table Cell Styling
————————————————————-*/

.brd .main-content th {
	font-size: 1.084em;
	padding: 0.462em 1.417em;
	font-weight: normal;
	}

.brd table td {
	padding: 0.5em 1.417em;
	border-width: 1px;
	border-style: solid none none solid;
	}

.brd table td.tc0 {
	border-left-style: none;
	border-left-width: 0
	}

.brd table th {
	padding: 0.5em 1.3em;
	border-style: none;
	}

.brd table td.actions, .brd table th.actions {
	text-align: right;
	}

.brd table td.actions span {
	display: block;
	}


/*************************************************************
H - MAIN CONTENT - ODDMENTS
**************************************************************/

/* Reports
————————————————————-*/

.brd .report {
	margin-left: 4em;
	}

.brd .report h3 span {
	display: block;
	font-style: normal;
	}

.brd .report h3 cite {
	font-style: normal;
	font-size: 1.084em;
	font-weight: bold;
	}

.brd .report h3 strong {
	position: absolute;
	left: -3.1em;
	width: 1.5em;
	text-align: right;
	font-size: 1.167em;
	}

.brd .report p strong {
	display: block;
	font-weight: normal;
	}

.brd .report h4 {
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	}

#brd-admin-reports .frm-buttons {
	margin-left: 4em;
	margin-top: 0;
	}

.brd .report .item-select {
	position: absolute;
	top: 0;
	right: 0.75em;
	height: 2.5em;
	}

/* Help File
————————————————————-*/

.brd .help-box samp {
	display: block;
	margin-left: 1.5em;
	}

.brd .help-box h5 samp {
	margin-left: 1.417em;
	}

.brd .help-box code {
	font-family: courier;
	font-size: 1.084em;
	}

.brd .help-box .entry-content {
	padding: 0;
	}

.brd .help-box .hn {
	padding-bottom: 0.5em;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	margin-bottom: 0.5em;
	color: #294F6E
	}

swetlana · August 29, 2010

ну пожалуйста:

Вот в Firefox:

Правда же, несколько иначе выглядит?

А в Opera так:

Да и в виндовом псевдобраузере тоже похоже:

Чтобы текст умещался в одну строчку — такого мне не удалось увидеть нигде. Хотя, если честно, не везде смотрела.

К чему я это всё:

Не занимайтесь ерундой. Единственный способ жёстко определить внешний вид текста в браузере пользователя — это сделать его картинкой.

Да и то, работает лишь с тучкой оговорок.

Надо ли оно?

gohtwew · August 29, 2010

Вы серьезно не видите разницу между вашими тремя скринами или это шутка?

Edited August 29, 2010 by gohtwew

swetlana · August 29, 2010

Вы серьёзно не видите отличия моих скринов с ФФ и Оперы от ваших с тех же браузеров или это шутка?

Я вам как раз о том, что шрифты и будут выглядеть по разному. И это нормально.

Можно было бы наделать ещё с десяток скринов с различными пользовательскими настройками и ещё в некоторых других браузерах, в других ОС — и везде бы всё выглядело по разному.

Следует понимать различие между понятиями «оформление текста» и «издевательство над текстом».

Загонять текст в жёсткие рамки — это издевательство.

Делать текст удобным для просмотра посетителем (с учётом индивидуальных особенностей посетителей. Кто-то может зрение бережёт и шрифты увеличивает — не такой уж и редкий случай) — это оформление.

Vlad · August 29, 2010

Размеры шрифтов в браузерах иногда скачут. Решается это подбором значений, к примеру 0.82em вместо 0.8em и перехода на пиксели 14px. Но это только касается размеров. Сглаживание и другие вещи прерогатива браузеров, через CSS к ним не подойдешь.

Sign In

Шрифт и разные браузеры

Question

gohtwew

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

swetlana

Link to comment

Share on other sites

gohtwew

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

gohtwew

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information