代码适用于Chrome和IE11,但不适用于IE9

时间:2017-09-20 19:06:37

标签: html css

我的网页在Chrome和IE11中运行良好,但不适用于IE9。我错过了什么。以下是我所拥有的。在Chrome和IE11中,我的按钮位于页面中间,但在IE9中,它们位于页面的左上角。关于我失踪的任何想法?在IE9和Chrome中,它也缺少按钮的圆角边缘。圆边仅适用于IE11。



body {
  background-image: url("Wallpaper.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-color: #00ADEF;
}
.wrapper {
  text-align: center;
  display: inline-block;
}

.button {
  appearance: button;
  -moz-appearance: button;
  -webkit-appearance: button;
  text-decoration: none;
  display: inline-block;
  padding: 2px 8px;
  margin: 5px;
  width: 300px;
  height: 60px;
  line-height: 60px;
  background-color: #941c2f;
  color: white;
  font-family: Arial;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  border: 0;
  border-radius: 25px;
  padding: 5px 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.button:hover {
  background: #C1CFDA;
  color: black;
}

.container {
  height: 100%;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

<html>
<head>
	<link rel="stylesheet" href="styles.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
	<div class="container">
		<a href="URL" class="button" target="_blank">URL</a>
		<a href="URL2" class="button" target="_blank" disabled>URL2</a>
	</div>

</body>
</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案