почему border css уменьшает ширину в firefox - PullRequest
Новая
       30

почему border css уменьшает ширину в firefox

3 голосов
/ 09 апреля 2011

У меня есть этот CSS для выделения ввода, когда они находятся в фокусе: 

input:focus, textarea:focus{  
  background-color: #FFFF99;  
  border-width: 1px;  
  border-style:solid;  
  border-color:Black;  
}

Я просто заметил, что когда я нажимаю на текстовое поле, оно уменьшается на очень маленькую, но заметную величину.Есть ли какая-то причина, по которой приведенный выше css изменил бы ширину и высоту текстового поля, когда у меня оно в фокусе?

Я использую Firefox 3.16

Ответы [ 3 ]

4 голосов
/ 09 апреля 2011

уменьшается, потому что границы textarea input по умолчанию равны 2-3px, и вы переопределяете их только на 1px в состоянии фокуса

он не будет уменьшаться, если вы переопределите границы по умолчанию на одинаковую ширину, например ::1005* 

input, textarea {
  border: 1px solid #444;
}

input:focus, textarea:focus{  
 background-color: #FFFF99;  
 border-width: 1px;  
 border-style:solid;  
 border-color:Black;  
 }

Обновление

чтобы сохранить исходные размеры без пересчета границ, это работает: 

input, textarea {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  width: 300px;
  height: 50px;

}

input:focus, textarea:focus{  
 background-color: #FFFF99;  
 border-width: 1px;  
 border-style:solid;  
 border-color:#000;  
 }
0 голосов
/ 10 апреля 2011

Это может работать: 

input, textarea {
  border: 1px solid #444;
  paddding:1px
}

input:focus, textarea:focus{  
 background-color: #FFFF99;  
 border-width: 1px;  
 border-style:solid;  
 border-color:Black; 
padding:0 
 }
0 голосов
/ 09 апреля 2011

Это из-за Box Model .

Когда вы применяете ширину границы 1px, он должен «съесть» 2px (1 для каждой стороны) по горизонтали и вертикали от вашего элемента.

...