html - 如何修复在 Edge 上运行良好但在 IE 上无法正常运行的 CSS
问题描述
我目前正在开发一个带有一堆按钮的小网页,上面附有链接。该网页在 Edge 上显示得非常好,但我不确定如何修复它以使其在 IE 上正常显示。目前按钮和导航栏太大并且相互重叠。
.header img {
float: left;
width: 100px;
height: 100px;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
font-size: 300%;
}
body {
background-color: lightblue;
}
.container {
display: grid;
}
.nav-bar {
display: grid;
grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
justify-content: space-around;
color: white;
background-color: black;
height: 40px;
align-items: center;
font-size: 20px;
}
.nav-item {
text-align: center;
}
.buttons {
display: grid;
grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
justify-content: space-around;
}
.button-group {
display: flex;
flex-direction: column;
}
button {
border-radius: 12px;
background-color: gray;
color: white;
border: none;
margin: 5px;
height: 50px;
font-size: 20px;
cursor: pointer;
}
button:hover{
background-color: #4CAF50;
color: white;
}
.generaldocs{
margin-left: 50px;
margin-top: 10px;
}
.technews{
margin-left: 90px;
margin-top: 10px;
}
.nav-item a{
color: white;
text-decoration: none;
}
.header a{
text-decoration: none;
color: black;
}
解决方案
试试这段代码,IE 和一些旧浏览器需要前缀才能正确运行代码。
.header img {
float: left;
width: 100px;
height: 100px;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
font-size: 300%;
}
body {
background-color: lightblue;
}
.container {
display: grid;
}
.nav-bar {
display: grid;
grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
-ms-flex-pack: distribute;
justify-content: space-around;
color: white;
background-color: black;
height: 40px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 20px;
}
.nav-item {
text-align: center;
}
.buttons {
display: grid;
grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.button-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
button {
border-radius: 12px;
background-color: gray;
color: white;
border: none;
margin: 5px;
height: 50px;
font-size: 20px;
cursor: pointer;
}
button:hover{
background-color: #4CAF50;
color: white;
}
.generaldocs{
margin-left: 50px;
margin-top: 10px;
}
.technews{
margin-left: 90px;
margin-top: 10px;
}
.nav-item a{
color: white;
text-decoration: none;
}
.header a{
text-decoration: none;
color: black;
}
推荐阅读
- python - CommandOnCooldown 错误处理程序未捕获错误!已经测试了一切
- google-cloud-platform - Google Cloud REST API 身份验证示例
- amazon-web-services - 在 AWS Lambda 上请求异步执行
- python - Scrapy和解释代码输出中get()和getall()的区别
- java - ExceptionHandler 在控制器中不起作用
- node.js - 创建实时通知系统的不同选项
- ansible - Ansible Jinja2 模板 - 捕获 textfsm 异常
- powershell - 哪个命令列出系统上的所有防火墙规则,输出包含信息和标头:规则名称、TCP 端口、已启用?
- c# - 使用 WinDbg 和 wpr 调试 OutOfMemory 异常。为什么这些符号显示为?!?- jited .net?
- eclipse - sbt 1.4 文件夹在哪里?