Geek asks and answers

Cross browser height and width input buttons

body #wrapper .button {
  background: #00b1ff; /* Old browsers */
  background: -moz-linear-gradient(top,  #00b1ff 0%, #006aff 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b1ff), color-stop(100%,#006aff)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #00b1ff 0%,#006aff 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #00b1ff 0%,#006aff 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #00b1ff 0%,#006aff 100%); /* IE10+ */
  background: linear-gradient(top,  #00b1ff 0%,#006aff 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b1ff', endColorstr='#006aff',GradientType=0 ); /* IE6-9 */
  height: 45px;
  width: 118px;
  color: white;
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
  text-align: center;
  text-shadow: 0px -1px 0px #223847;
  cursor: pointer;
}

this seems to create some height / width changes in different browsers. any suggestions for getting perfect pixel height / width in browsers? The gradient seems fine, I'm fine if it degrades to solid in older browsers.

+3
source share
3 answers

Browser providers often add a specific style. Things like borders, paths, gaskets, and margins differ between browsers. You can use reset cssto return all the default value or at least something known.

See also.

0
source

, , . , .

0

Hey, first of all, I would suggest eric meyer css reset http://meyerweb.com/eric/tools/css/reset/

Secondly, if you plan to redistribute your button, first remove the meaningless parent selector (leave it offline, so you can use it later). And for further development and good practice, try making one default button with basic properties with some primary colors, so that later you can add new classes with only different color options.

0
source

More articles:


All Articles