Помогите разобраться, пожалуйста.
Без 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>
