html - 我试图让每个网络浏览器的风格看起来都一样

Question

问题是:

我正在一个网站上工作，并试图让两个 Internet 浏览器看起来一样。我在下面发布了样式表。

我正在尝试使用 css.reset 但没有完全理解它。在 chrome 中，样式表按照我希望的方式创建网站，但在 Internet Explorer 中却不是。图片的像素将向相反的方向移动大约 200 个像素。我也想发布第二张 explorer 的图片。

html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, center,
dl, dt, dd, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

footer, header, hgroup, menu, nav, section {
	display: block;
}

html {
	height: 100%;
	width: 100%;
}

h1 {
	text-align: center;
	color: white
}


h3 {
	text-align: center;
	color: white;
}

@media only screen and (min-width:960px){
	/* styles for browsers larger than 960px; */
	.center{
		margin-left: auto;
		margin-right: auto;
		top: 125px;
		right: 420px;
		margin-bottom: auto;
		margin-top: auto;
		width: 700px;
		height: 400px;
		position: fixed;
	}
}
@media only screen and (min-width:1440px){
	/* styles for browsers larger than 1440px; */

}
@media only screen and (min-width:2000px){
	/* for sumo sized (mac) screens */
}
@media only screen and (max-device-width:480px){
   /* styles for mobile browsers smaller than 480px; (iPhone) */
   	.center{
		margin-left: auto;
		margin-right: auto;
		top: 150px;
		right: 130px;
		margin-bottom: auto;
		margin-top: auto;
		width: auto;
		height: 350px;
		position: fixed
	}
}
@media only screen and (device-width:768px){
   /* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

	

/*must aways have a position
	VIDEO SECTION
*/



@media only screen and (min-width:960px){
	/* styles for browsers larger than 960px; */
	video{
		width: 1000px;
		height: 500px;
		position: absolute;
		left: 200px;
		top: 150px;
	}
}

@media only screen and (max-device-width:480px){
   /* styles for mobile browsers smaller than 480px; (iPhone) */
	video{
		width: 600px;
		height: 500px;
		position: absolute;
		left: 70px;
		bottom: 500px;
	}
}



h4 {
	text-align: center;	
	color: white
}
h2 {
	text-align: center;	
	color: white
}

h5 {
	text-align: center;	
	color: white
}

	
p{
	position: relative;
	text-align: center;
	top: 400px;	
}




body {
	/*This is the pages background color*/
	background-color: #000080;
	background-repeat: no-repeat;
	background-size: cover;
	color:white;
	font-family: Arial, Helvetica, sans-serif;
}

.tab {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: auto;
	/* tab color*/
	background-color: #cccccc;
	opacity: 1;
}

.boarder {
	float: left;
	border: 2px groove black;
}

ol {
	word-break: break-all;
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
	/*This works like an margin in word where it the words 
	a few inches from the border*/
    padding-left: 30px;
}

ol li {
    padding: 10px;
    margin-left: 35px;
}

.boarder_2{
	border: 5px groove black;
	border-style: solid;
	margin: 0;
	opacity: 1;
	border-color: #5791ed; 
	padding: 5px;
}


li a {
	display: block;
	color: white;
	text-align: center;
	padding: 8px 10px;
	text-decoration: none;
	
}

li a:hover:not(.active) {
	background-color: #111;
}

.active {
	background-color: #4CAF50;
}

.none {
	float: none;
}

li {
	float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

Chrome

Answer 1

这并不容易，网站在不同的浏览器中显示不同，internet explorer 是最差的。尝试删除

 width: 100%;

在html css标签中，也有很多文章讲到这个，看看吧。