Jump to content
  • 0

Единицы длин в разных браузерах


AlexKon
 Share

Question

Собственно вопрос вот какой,

какая из единиц длин наиболее точно,

а лучше идеально, совпадает во всех

популярных браузерах, в частности

интересует форматирование текста.

Я версткой уже занимаю довольно долго,

и мне хватало обычно px, % и em, для

приблизительного сходства, но в этот раз

человек хочет что бы текст который

находится на граф макете полностью, до пиксела

совпадал и на готовой HTML странице, во всех

браузерах.

Сейчас разброс состовляет от 0-4px меж строчного

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

<div style="padding-top:36px; padding-left:39px; padding-right:35px;">
<p style="margin:0px; font-family:Georgia, 'Times New Roman', Times, serif; font-size:14px; line-height:122%; color:#5a5049; text-indent: 35px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<br style="line-height:122%; margin:0px; padding:0px; font-size:14px;" />
<p style="margin:0px; font-family:Georgia, 'Times New Roman', Times, serif; font-size:14px; line-height:122%; color:#5a5049">Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit. Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
<br style="line-height:16px; margin:0px; padding:0px; font-size:14px; height:10px;" />
<p style="margin:0px; font-family:Georgia, 'Times New Roman', Times, serif; font-size:12px; line-height:15px; color:#5a5049"><span style="color:#c5b8af;">> </span><span style="color:#006699">More details</span></p>
</div>

а с словами еще хуже обстоят дела в тесте

на все теги "P" стоят padding:0px; margin:0px;

ЗЫ: макет по которому сравниваем сделан в photoshop CS3, текст лежит обычным текстовый блоком

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

А если будет отключено сглаживание, то текст перестанет попиксельно совпадать.

А на маке он уж точно не будет соответствовать макету с точностью до пикселя.

Варианта решения проблемы есть 2:

— объяснить, что HTML не предназначен для реализации полиграфических макетов;

— отказать заказчику, если первый пункт не пройдет.

Ну или вставить картинку. Такого полного контроля над страницей, как вам нужно, HTML/CSS не дают.

Link to comment
Share on other sites

  • 0
А если будет отключено сглаживание, то текст перестанет попиксельно совпадать.

А на маке он уж точно не будет соответствовать макету с точностью до пикселя.

Варианта решения проблемы есть 2:

— объяснить, что HTML не предназначен для реализации полиграфических макетов;

— отказать заказчику, если первый пункт не пройдет.

Ну или вставить картинку. Такого полного контроля над страницей, как вам нужно, HTML/CSS не дают.

ммм, плохо,

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

может я что то упустил или чего незнаю

только без хаков

Link to comment
Share on other sites

  • 0
Попробуйте все значения задать в пикселях, но я не уверен, что это сильно изменит ситуацию...

а я точно уверен, что ситуация не изменится..

а сделать полное совпадение с макетом не выйдет никак(естесно, как писалось выше,если не вставить картинку).

Link to comment
Share on other sites

  • 0
а я точно уверен, что ситуация не изменится..

а сделать полное совпадение с макетом не выйдет никак(естесно, как писалось выше,если не вставить картинку).

Может, отклонения станут меньше.

Но полного совпадения макетов не будет все равно, это понятно.

Link to comment
Share on other sites

  • 0
InternetExplorer 1.0

Насколько я в курсе, какая-никакая поддержка CSS появилась лишь в в IE3, а мало-мальски осмысленное позиционирование — только в IE4 :)

По теме — хорошо бы, конечно, чтоб и font-size, и line-height приводились к целому числу пикселей (напр. 12px/15px, оно же 12px/1.25). Но если на дизайне нарисовано иначе... Дробные em-ы и проценты все браузеры округляют чуть-чуть по-разному, и ничего с этим не поделать. И да, приходится помнить про Mac/Linux с принципиально другой отрисовкой шрифтов, да и сами шрифты там другие...

Link to comment
Share on other sites

  • 0
Насколько я в курсе, какая-никакая поддержка CSS появилась лишь в в IE3, а мало-мальски осмысленное позиционирование — только в IE4 :D

По теме — хорошо бы, конечно, чтоб и font-size, и line-height приводились к целому числу пикселей (напр. 12px/15px, оно же 12px/1.25). Но если на дизайне нарисовано иначе... Дробные em-ы и проценты все браузеры округляют чуть-чуть по-разному, и ничего с этим не поделать. И да, приходится помнить про Mac/Linux с принципиально другой отрисовкой шрифтов, да и сами шрифты там другие...

кстати на Маке пикселы нормально отображаются, и в большенстве случаев устраивают, но хотелось бы получать пкс в пкс

некоторые клиенты на этом сдвинуты

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy