IE浏览器中文本框和下拉列表不能对齐，在火狐中可以，是什么原因，没有设置padding和margin

2023-03-04 02:05:02html-css015

IE浏览器中文本框和下拉列表不能对齐，在火狐中可以，是什么原因，没有设置padding和margin,第1张

这些东西其实你不必过于在意的！每一个浏览器的内核都有不一样！像你这种情况，可以升级IE版本！或者只能使用其他浏览器！对于像我这样开发软件的人员，开发出来的软件，主要用在主流浏览器上测试！在不同的浏览器上，页面上还是会有一些差别的。比如常见的IE和火狐，我的软件页面在两种浏览器上是有一定的差别的！这就是内核的差异！但还是有一些浏览器是可以通用的！一般来说，360和IE的效果是一样的！

什么是CSS Reset。HTML标签在浏览器中都有默认的样式，例如p标签有上下边距，strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别，例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。现在很流行的解决方法是一开始就将浏览器的默认样式全部覆盖掉，这就是CSS reset。

部分CSS reset内容如下

html {color:#000background:#FFF}t5

body,div,dl,dt,dd,ul,ol,li,

h1,h2,h3,h4,h5,h6,

pre,code,form,fieldset,legend,

input,textarea,p,blockquote,th,td{margin:0padding:0}

table {border-collapse:collapseborder-spacing:0}

fieldset,img {border:0}

address,caption,cite,code,dfn,em,strong,th,var {font-style:normalfont-weight:normal}

li {list-style:none}

caption,th {text-align:left}

h1,h2,h3,h4,h5,h6 {font-size:100%font-weight:normal}

q:before,q:after {content:''}

abbr,acronym {border:0font-variant:normal}

sup {vertical-align:text-top}

sub {vertical-align:text-bottom}

input,textarea,select {font-family:inheritfont-size:inheritfont-weight:inherit}

input,textarea,select {*font-size:100%}

legend {color:#000}

编辑方法如下：

一.使用 HTML5 的声明

在 HTML 4.01 和 XHTML 中那段长长的 DTD 类型声明应该是所有标签中最难记住的标签了，但在 HTML5 中， DTD 声明非常简单：

<!DOCTYPE html>

就是这么简洁，要使用 HTML5 ，第一步肯定是先使用 HTML5 的 <!DOCTYPE>声明。

二.加入 html5.js

可以在主题的 head 元素内加入一段 js 来让 IE8 及以下的 IE 完全支持 HTML5 的标签。

下载由 html5shiv 提供的这个 html5.js 文件。

<!--[if lte IE 9]>

<![endif]-->

代码中使用了条件注释针对低版本的 IE（IE8 及以下版本）浏览器来调用这个 js 文件，其他浏览器会忽略掉这段代码，不会造成浪费的 HTTP 请求。

三.CSS Reset

CSS Reset 是为了把浏览器提供的默认样式去掉的一段 CSS ，详细的介绍可以参见 Kayo 之前所写的一篇文章《关于 CSS Reset 》，本文中的 CSS Reset 是根据前文的 CSS Reset 改造的，主要是加入了对 HTML5 中新加入的标签的重置。下面是 Kayo 针对 HTML5 的 CSS Reset ，供大家参考，也可以参照前文定制更适合个人情况的 CSS Reset 。

/*** 加入 HTML5 新标签的样式重置 ***/

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0padding: 0border: 0outline: 0font-size: 100%vertical-align: baselinebackground: transparent}

body{line-height: 1text-align: left}

:focus {outline: 0}

/*** 将一些可以代替 div 标签的 HTML5 标签定义为块状元素 ***/

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block}

ol, ul {list-style: none}

blockquote, q {quotes: none}

blockquote:before, blockquote:after, q:before, q:after {content:''content:none}

ins {text-decoration: none}

mark {background-color: #ff9color: #000font-style: italicfont-weight: bold}

del {text-decoration: line-through}

table {border-collapse: collapseborder-spacing: 0}

input, select {vertical-align: middle}

现在，可以放心的在 WordPress 主题中使用 HTML5 标签了。

四.修改主题中的标签为语义化的 HTML5 标签

在网页重构中，舍弃了没有任何语义的 table 布局，取而代之的是新的标记，最常见的莫过于 div 这个标签，不过在设计复杂的页面时，新的问题出来了—— div 的滥用导致页面变得臃肿并且难于理解。值得兴奋的是， HTML5 为开发者引入了新的语义化标记，下面给大家介绍一些适合在 WordPress 主题中使用的 HTML5 标签。

<header>用于定义文档的页眉，可以代替原本包裹页眉的 <div>。

<footer>用于定义文档的页脚，可以代替原本包裹页脚的 <div>。

<nav>用于定义导航链接的部分，即代替包裹菜单的 <div>。

<article>用于定义独立的内容，很适合代替包裹文章的 <div>，如 WordPress 首页、归档页或文章页的文章列表中可使用该标签包裹文章。

<aside>该标签用于定义其所处内容之外的内容，并且 aside 的内容应该与附近的内容相关，因此很适合用来包裹 WordPress 的侧边栏。

另外 <time>, <small>, <section>等 HTML5 标签也适合用来改造升级 WordPress 主题，这些标签的具体意义可以参见 W3school 。

五.为主题加入 HTML5 微数据

关于 HTML5 微数据的介绍和使用方法可以参见 Kayo 之前所写的文章《HTML5 之微数据》，这里主要介绍一些适合 WordPress 使用的微数据规范，因此建议读者先阅读前文再阅读下文。

这里使用的是 schema.org 的微数据规范，加入微数据是为了让机械（如搜索引擎）识别网页内容的意义，可以说是华丽丽的 SEO 。

下面列举一些适合的微数据规范：

http://schema.org/WPHeader 这是定义网页版头的微数据，需要注意的是 WPHeader 的 “WP” 不是指 WordPress ，而是 Web Page 的缩写，不过用在 WordPress 上也是非常合适的。

http://schema.org/WPFooter 定义网页页脚。