IE6 兼容问题 input在设置border:0；或者border:none；还是默认有一像素的边框 10
附上代码<!doctypehtml><html><head><metacharset="utf-8"><title>Busy-电商</title><style>input...
附上代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Busy - 电商</title>
<style>
input{
outline:0;
margin:0;
background:url(about:blank);
}
.search_box{
width: 500px;
height: 40px;
margin: 100px auto;
padding:0;
}
.search_input{
border:none;
outline:none;
width: 440px;
height: 30px;
float: left;
border:1px #ff8c00 solid;
margin:0;
display:inline;
}
.search_btn{
border:none;
float: left;
width: 58px;
height: 34px;
line-height: 30px;
color: #FFF;
font-family: "Microsoft YaHei", "微软雅黑";
background-color: #FF8C00;
}
</style>
</head>
<body>
<div class="search_box">
<input type="text" class="search_input">
<input type="button" class="search_btn" value="搜索">
</div>
</body>
</html>
问题：
父级元素宽度500px，两个子级元素440+2+58刚刚好够。。。
很可惜，IE6就是不行
请问是什么原因 展开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Busy - 电商</title>
<style>
input{
outline:0;
margin:0;
background:url(about:blank);
}
.search_box{
width: 500px;
height: 40px;
margin: 100px auto;
padding:0;
}
.search_input{
border:none;
outline:none;
width: 440px;
height: 30px;
float: left;
border:1px #ff8c00 solid;
margin:0;
display:inline;
}
.search_btn{
border:none;
float: left;
width: 58px;
height: 34px;
line-height: 30px;
color: #FFF;
font-family: "Microsoft YaHei", "微软雅黑";
background-color: #FF8C00;
}
</style>
</head>
<body>
<div class="search_box">
<input type="text" class="search_input">
<input type="button" class="search_btn" value="搜索">
</div>
</body>
</html>
问题：
父级元素宽度500px，两个子级元素440+2+58刚刚好够。。。
很可惜，IE6就是不行
请问是什么原因 展开
1个回答
展开全部
是不是宽度不够啊 帮你改好了
加个padding:0 就可以了 我为了美观加的是padding:0 5px; 左右空5像素
用户输入关键字时 不会挨着边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
input { outline:0; margin:0; background:url(about:blank); }
.search_box { width: 500px; height: 40px; margin: 100px auto; padding:0; }
.search_input { border:none; outline:none; width: 430px; padding:0 5px; height: 30px; line-height:30px; float: left; border:1px #ff8c00 solid; margin:0; display:inline; }
.search_btn { border:none; float: right; width: 58px; height: 32px; line-height: 32px; color: #FFF;
font-family: "Microsoft YaHei", "微软雅黑"; background: #FF8C00; }
</style>
<body>
<div class="search_box">
<input type="text" class="search_input">
<input type="button" class="search_btn" value="搜索">
</div>
</body>
</html>
追问
请问一下IE6 的input标签都有默认padding的吗
然后border：none；和border：0；的区别在什么
追答
不是单单IE会有默认的padding 边框像素 在火狐中默认的就是margin:0
所以你在做网页时 公共CSS样式中的顶部都要写上
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,big,cite,code,del,em,font,img,ins,small,strong,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,input{margin:0;padding:0}把这些标签的padding跟margin值默认设置成0
【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。
【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
大雅新科技有限公司
2024-11-19 广告
这方面更多更全面的信息其实可以找下大雅新。深圳市大雅新科技有限公司从事KVM延长器,DVI延长器,USB延长器,键盘鼠标延长器,双绞线视频传输器,VGA视频双绞线传输器，VGA延长器,VGA视频延长器,DVI KVM 切换器等，优质供应商，...
点击进入详情页
本回答由大雅新科技有限公司提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
