Проблема с "кнопками в safari"

EnvIT · May 8, 2011

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

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

1) Делаю заготовку html:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML CHECK</title>
<link rel="stylesheet" type="text/css" href="css/css-for-check.css" />
</head>
<body>
	<div id="box">
		<a href="">a</a>
		<blockquote>a</blockquote>
		<cite>a</cite>
		<code>a</code>
		<h1>a</h1>
		<h2>a</h2>
		<h3>a</h3>
		<h4>a</h4>
		<h5>a</h5>
		<h6>a</h6>
		<label>a</label>		
		<p>a</p>
		<pre>a</pre>
		<menu>
			<li>a</li>
		</menu>
		<ol>
			<li>a</li>
		</ol>
		<ul>
			<li>a</li>
		</ul>
		<form>
			<input type="text" value="a" />
			<input type="reset" value="a" />
			<button>a</button>
			<input type="submit" value="a" />
			<textarea>a</textarea>
			<select>
				<optgroup label="a">
					<option selected="selected">a</option>
					<option>w</option>
				</optgroup>
			</select>
		</form>
	</div>
</body>
</html>

2) Делаем свой css-reset для всех стилей (не используйте css-reset для первичного описания стилей конкретного проекта, убивает производительность из-за дальнейшего переопределения стилей)


input[type="text"], input[type="reset"], input[type="submit"], button, select, textarea {
margin-top:0;
margin-left:0;
margin-bottom:0;
margin-right:0;

padding-top:0;
padding-right:0;
padding-left:0;
padding-bottom:0;

font-family:inherit;
font-size:1em;
line-height:12px !important;

border-width:0;
}

input[type="text"], select, textarea {
outline:0 none;
background-color:transparent;
}

textarea {
overflow:auto; /* for IE */
resize:none;
}

3)Наблюдаем проблемы с элементами формы, пытаемся "допилить":


input[type="text"], input[type="reset"], input[type="submit"], button, select, textarea {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

height:12px;
}

input[type="text"], input[type="reset"], input[type="submit"], button, textarea {
width:6px
}

Получаем, что получаем. Проверяю свежие браузеры вендоров "Chrome, Opera, Safari, IE, Mozilla", а также IE8.

Отчет о проблемных элементах:

1) Chrome

input[type="text"], select, textarea

2) Opera

textarea /* текст немного съезжает вниз */

3) Safari

input[type="text"], input[type="reset"], input[type="submit"], button, select, textarea

4) IE9 и IE8

select

5) Mozilla

input[type="text"], input[type="reset"], input[type="submit"], button, select

line-height для input и button нельзя задать меньше 14px, хотя input[type=text] отображается при этом нормально.

Позже займусь кроссбраузерностью этого дела

Edited May 9, 2011 by EnvIT

psywalker · May 10, 2011

psywalker: я пока писал текст ты уже меня опередил

Это хорошо, а то получилось бы наоборот

EnvIT · May 10, 2011

Я понимаю ЧТО автор хочет сделать, но не понимаю ЗАЧЕМ.
В любом случае удачи, это тоже опыт.
Затем, что надоело получать разный результат с формами в разных браузерах или использовать кучу лишних меток...
К нормальному виду можно вполне привести любой элемент на странице, вопрос только в том, а надо ли? Ты не понимаешь сути, что понятие "кроссбраузерность" не означает, что везде, всё должно быть одинаково. Не обманывай браузеры, дай им делать то, что у них заложено
а что делать, если нужно сверстать пиксел в пиксел
поржал, спасибо.
Качественная вёрстка - это та вёрстка, которую не стыдно показать другу, эта вёрстка, код которой логичен и понятен даже младенцу. Вёрстка должна быть сделано качественно, а значит код этой вёрстки должен быть легко модернезируемым, чтобы она была поделена на логические блоки, далее чтобы эта вёрстка не разваливалась при наполнении блоков, всяких ураганов и прочих катаклизмов. Вёрстка должна быть такой, чтобы в будущем вам не пришлось практически ничего менять, если вы захотели как то изменить ваш сайт, чтобы вы легко могли просто добавить или удалить что нибудь, без нанесения ущерба вашему сайту. И это лишь мелочи.
Кроссбраузерность - это всё чушь, вёрстка может смотреться в разных браузерах по разному, и я не говорю про какие то страшные отличия, я имею ввиду особенности того или иного браузера, например всеми известного IE.

И снова ты не правильно понял... Что делать, если нужно выстроить в ряд текстовое поле и 2 кнопки и уместить их в 100px?

psywalker · May 10, 2011

Я понимаю ЧТО автор хочет сделать, но не понимаю ЗАЧЕМ.
В любом случае удачи, это тоже опыт.
Затем, что надоело получать разный результат с формами в разных браузерах или использовать кучу лишних меток...
К нормальному виду можно вполне привести любой элемент на странице, вопрос только в том, а надо ли? Ты не понимаешь сути, что понятие "кроссбраузерность" не означает, что везде, всё должно быть одинаково. Не обманывай браузеры, дай им делать то, что у них заложено
а что делать, если нужно сверстать пиксел в пиксел
поржал, спасибо.
Качественная вёрстка - это та вёрстка, которую не стыдно показать другу, эта вёрстка, код которой логичен и понятен даже младенцу. Вёрстка должна быть сделано качественно, а значит код этой вёрстки должен быть легко модернезируемым, чтобы она была поделена на логические блоки, далее чтобы эта вёрстка не разваливалась при наполнении блоков, всяких ураганов и прочих катаклизмов. Вёрстка должна быть такой, чтобы в будущем вам не пришлось практически ничего менять, если вы захотели как то изменить ваш сайт, чтобы вы легко могли просто добавить или удалить что нибудь, без нанесения ущерба вашему сайту. И это лишь мелочи.
Кроссбраузерность - это всё чушь, вёрстка может смотреться в разных браузерах по разному, и я не говорю про какие то страшные отличия, я имею ввиду особенности того или иного браузера, например всеми известного IE.
И снова ты не правильно понял... Что делать, если нужно выстроить в ряд текстовое поле и 2 кнопки и уместить их в 100px?

Неправильно понимаешь как раз ТЫ. Я давно уже приводил кросс решение, используя туже обёртку, но тебе же нужно сделать по своему

Great Rash · May 10, 2011

Вы соревнуетесь в количестве вложенных цитат?

psywalker · May 10, 2011

Вы соревнуетесь в количестве вложенных цитат?

Ага, и я победитель

Sign In

Проблема с "кнопками в safari"

Question

EnvIT

Link to comment

Share on other sites

30 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

EnvIT

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information