Javascript-форум - Показать сообщение отдельно - При добавлении DOCTYPE "плывут" размеры input type=text

Demath · #1 (**permalink**) 08.07.2012, 18:56

Помогите разобраться, пожалуйста.
Без DOCTYPE текстовые input (<input ... type="text" />) отображаются согласно заданного размера (width: 20px; height: 20px)

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-ru" xml:lang="ru-ru">

<head>
<title>Генератор матриц</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<style type="text/css">
ul li {list-style: none; padding: 0; margin: 0;}

#tabsText li {width:364px; height:230px; background: #ededed; border: 1px solid darkblue;
			  -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
			  
div.MatrixGenerator {float: left; position: relative; width: 354px; height: 159px; margin: 10px 0 0 5px;
				 background: transparent url(http://goo.gl/pwyR1) center no-repeat;}
	
	.MatrixRows, .MatrixCols, .MatrixVline, .MatrixHline, .MatrixInsert
				{position: absolute;}
	.MatrixRows {top: 82px; left: 84px;}
	.MatrixCols {top: 82px; left: 205px;}
	.MatrixVline {top: 110px; left: 239px;}
	.MatrixHline {top: 133px; left: 250px;}
	.MatrixInsert {top: 78px; left: 267px;}
	
	.MatrixRows input, .MatrixCols input, .MatrixVline input, .MatrixHline input
				 {width: 20px; height: 20px; margin: 0; padding: 0; color: blue;}	
				 
	.MatrixInsert input {width: 70px; height: 22px; margin: 0; padding: 0; cursor: pointer;}
	
	.tbrackets1, .tbrackets2, .tbrackets3, .tbrackets4, .tbrackets5, .tbrackets6
				{position: absolute; top: 48px; height: 22px; cursor: default;}
	.tbrackets1 {width: 28px; left: 10px;}
	.tbrackets2 {width: 25px; left: 69px;}
	.tbrackets3 {width: 25px; left: 126px;} 
	.tbrackets4 {width: 32px; left: 183px;}
	.tbrackets5 {width: 34px; left: 246px;}
	.tbrackets6 {width: 18px; left: 309px;}
	
	.ibrackets1, .ibrackets2, .ibrackets3, .ibrackets4, .ibrackets5, .ibrackets6
				{position: absolute; top: 52px; height: 22px; cursor: default;}
	.ibrackets1 {left: 40px;}
	.ibrackets2 {left: 96px;}
	.ibrackets3 {left: 153px;} 
	.ibrackets4 {left: 217px;}
	.ibrackets5 {left: 282px;}
	.ibrackets6 {left: 328px;}
	
	.ibrackets1 input, .ibrackets2 input, .ibrackets3 input, .ibrackets4 input, .ibrackets5 input, .ibrackets6 input
				{margin: 0; width: 13px; height: 13px;}
</style>

<!--[if lt IE 9]>
<style type="text/css">
.ibrackets1 input, .ibrackets2 input, .ibrackets3 input, .ibrackets4 input, .ibrackets5 input, .ibrackets6 input
				{margin: 0; padding: 0; width: 13px; height: 13px;}
</style>
<![endif]-->
</head>

<body>
<ul id="tabsText">
<li>
<div class="MatrixGenerator">
	<span class="MatrixRows"><input name="rows1" maxlength="1" type="text" /></span>
	<span class="MatrixCols"><input name="cols1" maxlength="1" type="text" /></span>
	<span class="MatrixVline"><input name="vline1" maxlength="1" type="text" /></span>
	<span class="MatrixHline"><input name="hline1" maxlength="1" type="text" /></span>
	<span class="MatrixInsert"><input value="Вставить" name="button" type="button" title="Нажмите один раз"
								onclick="LatexMatrix(rows1,cols1,vline1,hline1,message)" /></span>

	<span class="tbrackets1" title="Круглые скобки"></span>
	<span class="tbrackets2" title="Прямые скобки"></span>
	<span class="tbrackets3" title="Квадратные скобки"></span>
	<span class="tbrackets4" title="Двойные прямые скобки (норма матрицы)"></span>
	<span class="tbrackets5" title="Фигурные скобки"></span>
	<span class="tbrackets6" title="Без скобок"></span>							
								
	<span class="ibrackets1"><input type="radio" name="mbrackets" checked="checked" value="p" onclick="brackets(this)" /></span>
	<span class="ibrackets2"><input type="radio" name="mbrackets" value="v" onclick="brackets(this)" /></span>
	<span class="ibrackets3"><input type="radio" name="mbrackets" value="b" onclick="brackets(this)" /></span>
	<span class="ibrackets4"><input type="radio" name="mbrackets" value="V" onclick="brackets(this)" /></span>
	<span class="ibrackets5"><input type="radio" name="mbrackets" value="B" onclick="brackets(this)" /></span>
	<span class="ibrackets6"><input type="radio" name="mbrackets" value="" onclick="brackets(this)" /></span>
</div>
</li>
</ul>
</body>
</html>

Но, когда добавляю DOCTYPE, эти input увеличиваются до width: 24px; height: 24px

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-ru" xml:lang="ru-ru">

<head>
<title>Генератор матриц</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<style type="text/css">
ul li {list-style: none; padding: 0; margin: 0;}

#tabsText li {width:364px; height:230px; background: #ededed; border: 1px solid darkblue;
			  -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
			  
div.MatrixGenerator {float: left; position: relative; width: 354px; height: 159px; margin: 10px 0 0 5px;
				 background: transparent url(http://goo.gl/pwyR1) center no-repeat;}
	
	.MatrixRows, .MatrixCols, .MatrixVline, .MatrixHline, .MatrixInsert
				{position: absolute;}
	.MatrixRows {top: 82px; left: 84px;}
	.MatrixCols {top: 82px; left: 205px;}
	.MatrixVline {top: 110px; left: 239px;}
	.MatrixHline {top: 133px; left: 250px;}
	.MatrixInsert {top: 78px; left: 267px;}
	
	.MatrixRows input, .MatrixCols input, .MatrixVline input, .MatrixHline input
				 {width: 20px; height: 20px; margin: 0; padding: 0; color: blue;}	
				 
	.MatrixInsert input {width: 70px; height: 22px; margin: 0; padding: 0; cursor: pointer;}
	
	.tbrackets1, .tbrackets2, .tbrackets3, .tbrackets4, .tbrackets5, .tbrackets6
				{position: absolute; top: 48px; height: 22px; cursor: default;}
	.tbrackets1 {width: 28px; left: 10px;}
	.tbrackets2 {width: 25px; left: 69px;}
	.tbrackets3 {width: 25px; left: 126px;} 
	.tbrackets4 {width: 32px; left: 183px;}
	.tbrackets5 {width: 34px; left: 246px;}
	.tbrackets6 {width: 18px; left: 309px;}
	
	.ibrackets1, .ibrackets2, .ibrackets3, .ibrackets4, .ibrackets5, .ibrackets6
				{position: absolute; top: 52px; height: 22px; cursor: default;}
	.ibrackets1 {left: 40px;}
	.ibrackets2 {left: 96px;}
	.ibrackets3 {left: 153px;} 
	.ibrackets4 {left: 217px;}
	.ibrackets5 {left: 282px;}
	.ibrackets6 {left: 328px;}
	
	.ibrackets1 input, .ibrackets2 input, .ibrackets3 input, .ibrackets4 input, .ibrackets5 input, .ibrackets6 input
				{margin: 0; width: 13px; height: 13px;}
</style>

<!--[if lt IE 9]>
<style type="text/css">
.ibrackets1 input, .ibrackets2 input, .ibrackets3 input, .ibrackets4 input, .ibrackets5 input, .ibrackets6 input
				{margin: 0; padding: 0; width: 13px; height: 13px;}
</style>
<![endif]-->
</head>

<body>
<ul id="tabsText">
<li>
<div class="MatrixGenerator">
	<span class="MatrixRows"><input name="rows1" maxlength="1" type="text" /></span>
	<span class="MatrixCols"><input name="cols1" maxlength="1" type="text" /></span>
	<span class="MatrixVline"><input name="vline1" maxlength="1" type="text" /></span>
	<span class="MatrixHline"><input name="hline1" maxlength="1" type="text" /></span>
	<span class="MatrixInsert"><input value="Вставить" name="button" type="button" title="Нажмите один раз"
								onclick="LatexMatrix(rows1,cols1,vline1,hline1,message)" /></span>

	<span class="tbrackets1" title="Круглые скобки"></span>
	<span class="tbrackets2" title="Прямые скобки"></span>
	<span class="tbrackets3" title="Квадратные скобки"></span>
	<span class="tbrackets4" title="Двойные прямые скобки (норма матрицы)"></span>
	<span class="tbrackets5" title="Фигурные скобки"></span>
	<span class="tbrackets6" title="Без скобок"></span>							
								
	<span class="ibrackets1"><input type="radio" name="mbrackets" checked="checked" value="p" onclick="brackets(this)" /></span>
	<span class="ibrackets2"><input type="radio" name="mbrackets" value="v" onclick="brackets(this)" /></span>
	<span class="ibrackets3"><input type="radio" name="mbrackets" value="b" onclick="brackets(this)" /></span>
	<span class="ibrackets4"><input type="radio" name="mbrackets" value="V" onclick="brackets(this)" /></span>
	<span class="ibrackets5"><input type="radio" name="mbrackets" value="B" onclick="brackets(this)" /></span>
	<span class="ibrackets6"><input type="radio" name="mbrackets" value="" onclick="brackets(this)" /></span>
</div>
</li>
</ul>
</body>
</html>