Input button plus background IE7 IE6 to black box method

Source: Internet
Author: User
Tags xmlns

Background can be a simple gradient or high light background and then repeat-x, the border directly set border on it, it seems that the idea is not a problem





IE9,IE8 did not find any problems, IE7 or IE6 will appear black box


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


<html xmlns= "http://www.w3.org/1999/xhtml" >


<head>


<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>


<title>input button plus background, IE7 or IE6 will appear black box </title>


<style type= "Text/css" >


<!--


. HK {


height:22px;


border: #999 1px solid;


background: #E5E5E5 URL (pn.png) repeat-x 0 0;


Cursor:pointer;


}


-->


</style>


</head>





<body>


<input type= "Submit" name= "Submit" value= "Landing" class= "HK" style= "width:70px;"/>


</body>


</html>








Solution:


1, if set Border:none, that is to say do not border, then this black box is not, so a solution is to directly write the box to the background, and then remove border, that is, set Border:none. The background of this button style is listed. The disadvantage of this approach must be clear, that is, the flexibility is poor, how many size buttons to prepare the size of the background





2, Input button to remove the frame line (Border:none), and then the input outside the sleeve Label,border written to the label, because the input was removed border, so will not appear black box, while the outside label has border, So the user can see the normal box line, of course, because of the characteristics of the label, you click on the label is equal to click on the input button, oh, right, in order to simulate a little better, you can set their cursor for pointer


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


<html xmlns= "http://www.w3.org/1999/xhtml" >


<head>


<meta http-equiv= "Content-type" content= "text/html"; charset=gb2312 "/>


<title>input button plus background, solve IE7 or IE6 will appear black box </title>


<style type= "Text/css" >


<!--


. pn {


height:22px;


Border:none;


background: #E5E5E5 URL (pn.png) repeat-x 0 0;


Cursor:pointer;


}


. L_PN {


Display:block;


border: #999 1px solid;


}


-->


</style>


</head>





<body>


<label class= "L_PN" style= "width:70px"; >


<input type= "Submit" name= "Submit" value= "Landing" class= "pn" style= "width:70px;"/>


</label>


</body>


</html>

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.