Проблемы с совместимостью с браузером с формой HTML

Question

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

форма представляет собой 800px широкий ввод текста (785px ширина + 5px границы + 10px обивка) и 100px кнопку шириной представить, все внутри 900px широкий div держать их вместе.

Проблема заключается в том, что ширина ввода текста варьируется от 1px от браузера до браузера, что приводит к тому, что кнопка ввода, расположенная справа от текстового ввода, будет отбрасываться дополнительным пикселем. Я исправил это для большинства браузеров с помощью определенных браузеров хаков, изменив ширину с 785px на 784px, но задавался вопросом, есть ли что-то еще, что мне не хватает, что вызывает это.

Адрес JSFiddle.

CSS:

div.formdivholder { 
    width: 100%; 
    height: 70px; 
    padding-top: 20px; 
} 

div.formdiv { 
    width: 900px; 
    height: 70px; 
    margin: 0 auto; 
} 

input.text { 
    z-index: 20; 
    height: 38px; 
    width: 785px; 
    float: left; 
    padding-left: 10px; 
    border: solid; 
    border-width: 5px; 
    border-color: #3374DC; 
    border-right: 0px; 
    background-color: #F0F4FA;; 
    border-top-left-radius: 7px; 
    border-bottom-left-radius: 7px; 
    box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.3); 
} 

input.submit { 
    z-index: 1; 
    height: 50px; 
    width: 100px; 
    float: right; 
    color: #F0F4FA; 
    font-weight: bold; 
    background-color: #3374DC; 
    border-top-right-radius: 7px; 
    border-bottom-right-radius: 7px; 
    border-width: 0px; 

} 

HTML

<div class="formdivholder"> 
    <div class="formdiv"> 
     <form class="search" role="search" method="get" action="/searchresults.php"> 
      <input type="text" name="input" class="text" placeholder="Search for"> 
      <input type="submit" class="submit" value="Search"> 
     </form> 
    </div> 
</div> 

Answer 1

Просто используйте CSS box-sizing, он поддерживается всеми браузерами и IE> = 9. Вы должны изменить следующее (только):

input.text { 
    height: 50px; 
    width: 800px; /* OR even this: width: calc(100% - 100px) */ 
    box-sizing: border-box; 
    .... 
} 

гляньте в Fiddle.

Определение стоимости имущества границы коробки:

ширина и высота свойства включают отступы и границы, но не маржу. Это полевая модель, используемая Internet Explorer, когда документ находится в режиме Quirks. Примечание: Прокладка & будет находиться внутри коробки, например. IF .box {width: 350px}; ТОГДА вы применяете {граница: 10px твердых черная;} {РЕЗУЛЬТАТ, вынесенные в браузере} .box {ширина: 350 пикселей;}

Вы можете увидеть в эти дни люди выбывают поддержку IE8, так что в начале CSS они просто ставят:

*, *:before, *:after { 
    box-sizing: border-box; 
} 

(и сделать их жизнь проще).

Answer 2

попробуйте использовать% вместо пикселя, следует сделать трюк, в дальнейшем, возможно, придется сделать некоторые отзывчивым так что% сэкономит ваше время на этом тоже