新手 css显示效果不一致 IE和chrome

李东亮 发布于 2013/11/16 12:35
阅读 2K+
收藏 0

做个搜索框练手,看oschina的好看就学了下,可是只能在chrome下显示正确

IE下就成了

求助如何修改能正确显示?

主要问题是左边输入框和右侧按钮大小不一致,不在同一行。。不知道为什么

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>Test Search</title>
<style type="text/css">
/* 全局 */
* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body,table,input,textarea,select,button {
  font-family: 微软雅黑, Verdana, sans-serif, 宋体;
}

/*body{text-align:center;}*/

.search  {
  margin: 10;
  padding: 0;
  overflow: hidden;
  margin-left: 28%;
  margin-right: auto;
}

.search .TXT {
  margin: 0;
  float: left;
  font-size: 10.5pt;
  width: 76%;
  height: 100%;
  border: 1px solid #40AA53;
  padding: 0 0 0 10px;
  -webkit-appearance: none;
  border-radius: 0;
}

.search .BTN {
  margin: 0;
  float: left;
  font-size: 10.5pt;
  background: #40AA53;
  border: 0;
  color: #fff;
  height: 100%;
  padding: 0 10 0 10px;
  cursor: pointer;

}

</style>
</head>
<body>
<div class="search" style="width:600px;height: 35px">
  <form id="search_form" action="./User/Search.action" method="post">
      <input type="text"  name="searchWord"  placeholder="Name" class="TXT">
      <button type="submit" class="BTN"> 搜索</button>
  </form>
</div>
</body>
</html>

 

 

以下是问题补充:

@李东亮:​主要问题是左边输入框和右侧按钮大小不一致,不在同一行。。不知道为什么 (2013/11/16 15:01)
加载中
0
gnefil.nil
gnefil.nil
form{
width: 100%;
height: 100%;

}

ie input 里的text不能自动居中,要用padding来调

0
淘淘我的小宝宝
淘淘我的小宝宝
placeholder属性是html5的新属性了,低版本的ie可能不支持,看看jquery-placeholder.js,或许可以帮助你。
0
Jackitshot
Jackitshot

IE 的placeholder支持
http://www.oschina.net/code/snippet_870697_18635

0
Polle
Polle

IE9以下的版本是肯定显示不正确的。

不需要支持旧版本IE,没有意义。

0
灵犀
灵犀
楼主写的这段代码是HTML4与HTML5混合版,建议先把代码写规范...
0
李东亮
李东亮

引用来自“gnefil.nil”的答案

form{
width: 100%;
height: 100%;

}

ie input 里的text不能自动居中,要用padding来调

也就是需要为IE单独写css,判断浏览器类型,加载不同的?

其实,主要问题是左边输入框和右侧按钮大小不一致,不在同一行。

gnefil.nil
gnefil.nil
不用单独写,直接把这段加进去,我在ie8测试过,一致的,你ie几啊
返回顶部
顶部