Я пытался получить текстовое поле и кнопку для выравнивания заподлицо друг с другом, я пробовал два метода, используя высоту и просто заполнение, но когда один работает для одного браузера, он не работает для другой, и наоборот.
Кто-нибудь знает, как решить эту проблему? скриншот присутствует ниже.
http://img291.imageshack.us/i/75462612.png/
На скриншоте показано использование приведенного ниже кода - и когда я использую отступы вместо высоты, Firefox выглядит нормально, но Chrome не выравнивается ..
.buttons {
font-family:arial;
font-size:18px;
height:38px;
margin-left:-1px;
border:1px solid #b4b4b4;
background: -webkit-gradient(linear, left top, left bottom, from(#cb43b3), to(#a5108b));
background: -moz-linear-gradient(top, #cb43b3, #a5108b);
-moz-border-top-right-radius:5px;
border-top-right-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-right-radius:5px;
color:#fff;
}
.buttons:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#a5108b), to(#cb43b3));
background: -moz-linear-gradient(top, #a5108b, #cb43b3);
}
.textarea {
border:1px solid #b4b4b4;
-moz-border-top-left-radius:5px;
border-top-left-radius:5px;
-moz-border-bottom-left-radius:5px;
border-bottom-left-radius:5px;
-moz-box-shadow: inset 2px 2px 2px 2px #cfcfcf;
-webkit-box-shadow: inset 2px 2px 2px 2px #cfcfcf;
box-shadow: inset 2px 2px 2px 2px #cfcfcf;
box-shadow: inset 2px 2px 2px 2px #cfcfcf;
padding:7px;
font-family:arial;
font-size:18px;
color:#7e7e7e;
width:300px;
}
Просто предположим, что у него нет другого кода, кроме тегов body .. хотя даже при использовании только тегов body эта проблема все еще сохраняется.