Collection of css browser compatibility issues_html/css_WEB-ITnose

1. Problem: The form button behaves inconsistently with input type=submit and a link.

input{ border:none; }

.btn{ ...; display:inline-block; }

.btn{ line-height: 35px ; padding: 0px 30px; } ①

Solution:

.btn{ height: 35px; line-height: 35px; width: 90px; vertical-align: middle; text-align: center; } ②

width and height limit the width and height of the button, line-height and vertical-align:middle center the text vertically, and text-align:center center the text horizontally.

Picture description:

1 2 respectively correspond to ①② code

2. Question: form input box, text, verification code image Not aligned

form p{ margin-bottom: 10px;}
.label{ width: 100px; text-align: right; padding-right: 5px; display: inline-block; }
.ipt{ height: 40px; width: 210px; border: 1px solid #dcdcdc; } (Note that the height of the input here is height. In IE, line-height cannot expand the height of the input, but firefox and chrome can)
.imgCode{ height: 40px; width: 70px; display: inline-block; cursor: pointer; }

< p>Username:

Password:

 

①

Solution:

Add .label, .ipt, .imgCode attributes { vertical-align: middle; } ②

Image description: