- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我网站的中间栏有 4 个使用显示的链接:表格方法在 Internet Explorer 11 中根本不显示。它们显示在我测试过的所有其他浏览器中。
关于如何显示这些有什么想法吗?
它应该是这样的:
HTML:
<title>Runna - Track your run!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/js.js"></script>
<script src="js/modernizr.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<img src="imgs/logo-blue.png" />
</header>
<div id="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11564.804405086046!2d172.59430635!3d-43.56069255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snz!4v1418977732755" frameborder="0" style="border:0"></iframe>
</div>
<div class="show-controls"><i class="fa fa-chevron-up"></i></div>
<section id="control-container">
<div class="column left">
<div id="left-wrapper">
<div class="left-top">
<ul>
<li><b>Distance</b></li>
<li>17.7KM</li>
</ul>
</div>
<div class="left-bottom">
<ul>
<li><b>Duration</b></li>
<li>14.55Mins</li>
</ul>
</div>
</div>
</div>
<div class="column middle">
<nav>
<ul>
<li><a href="#" class="arrow"><div><i class="fa fa-chevron-down"></i></div></a>
<a href="#"><div>START</div></a>
<a href="#"><div>STOP</div></a>
<a href="#"><div>PAUSE</div></a>
</li>
</ul>
</nav>
</div>
<div class="column right"></div>
</section>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font: 100% arial;
overflow: hidden;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
#wrapper {
height: 100vh;
}
.show-controls {
width: 100%;
height: 8vh;
background: black;
text-align: center;
color: white;
position: relative;
display: none; /*Initially hidden, will use jQuery to reveal when needed*/
}
.fa-chevron-up {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#map-container {
height: 65vh;
}
.show-controls:hover {
background: green;
}
.column.middle ul, .column.middle nav, .column.middle li {
height: 100%;
}
.column.middle {
position: relative;
}
.column.middle nav {
position: absolute;
top: 0px;
left:0px;
right: 0px;
bottom: 0px;
}
.column.middle li {
display: table;
width: 100%;
}
.column.middle li a {
display: table-row;
width: 100%;
}
.column.middle li a div {
display: table-cell;
vertical-align: middle;
}
header {
width: 100%;
height: 5vh;
background: black;
position: relative;
}
header img {
height: 80%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
iframe {
width: 100%;
height: 100%;
display: block;
}
#control-container {
width: 100%;
height: 30vh;
background: black;
display: table;
}
.column {
display: table-cell;
color: white;
width: 100%;
text-align: center;
}
.row {
display: block;
width: 100%;
}
.left {
background: #0f0f0f;
width: 33.3%;
height: 100%;
position: relative;
}
.middle {
background: black;
width: 33.3%;
height: 100%;
}
.right {
background: #0f0f0f;
width: 33.3%;
height: 100%;
}
nav ul {
height: 100%;
margin: 0;
padding: 0;
}
nav li {
display: block;
}
nav a {
color: white;
text-decoration: none;
text-align: center;
width: 100%;
padding: 30px;
}
nav a:hover {
background: green;
}
#left-wrapper {
height: 100%;
}
.left-top, .left-bottom {
height: 50%;
position: relative;
text-align: center;
}
.left-top ul, .left-bottom ul {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
list-style: none;
}
最佳答案
这里的问题似乎是绝对定位的 nav
元素直接位于 div.column
元素中,带有 display: table-cell
。绝对定位元素导致宿主 table-cell
的高度为 0px
。切换 overflow
属性显示内容在那里。
要解决 Internet Explorer 11 中的此问题,请应用以下更改:
vertical-align: top
添加到您的 div.column.middle
元素。nav
元素中删除 position: absolute
(和 TRBL 属性)。这似乎可以解决 Internet Explorer 11 中的问题。
关于html - Internet Explorer 11 不显示任何正在使用显示 : table method 的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27635577/
这个问题在这里已经有了答案: What is the best way to parse html in C#? [closed] (15 个答案) 关闭 3 年前。 string input =
为什么 wrapper #4 没有继承其父表容器的高度?表格嵌套在一个显示 block 包装器中,每个嵌套的div是显示表格,每个表格继承到最里面的一个。是什么原因造成的,我该如何解决? jsfidd
我正在使用带有 Bootstrap 的自定义 css 作为外边框。但顶部边框不可见,除非我将其大小设置为 2 px。 我该如何解决这个问题? HTML #name 1.one 2.two 3.thr
我正在逻辑层面上设计一个数据库,以便稍后将其传递给程序员来交付。我只是粗略地了解它们的工作原理,所以我很难简洁地表达我的问题。这是我的问题: 我有一个名为 MEANINGS 的表。 我有一个名为 WO
在 Laravel 上,我们可以使用 DB::table('table')->get(); 或使用 model::('table')->all() 进行访问;我的问题是它们之间有什么区别? 谢谢。 最
我试图从以下内容中抓取 URL从 WorldOMeter 获取 CoVid 数据,在此页面上存在一个表,id 为:main_table_countries_today其中包含我希望收集的 15x225
这是我的图表数据库:/image/CGAwh.png 我用 SEQUELIZE 制作了我的数据库模型: 型号:级别 module.exports = (sequelize, DataTypes) =>
我真的不明白为什么我的代码不能按预期工作。当我将鼠标悬停在表格的每一行上时,我想显示一个图像(来 self 之前加载的 JSON)。每个图像根据行的不同而不同,我想将它们显示在表格之外的另一个元素中。
假设我的数据库中有一张地铁 map ,其中每条线路的每个站点都是一行。如果我想知道我的线路在哪里互连: mysql> SELECT LineA.stop_id FROM LineA, LineB WH
我最近经常使用这些属性,尤其是 display: table-cell。它在现代浏览器中得到了很好的支持,并且它对某些网格有很多好处,并且可以非常轻松地对齐内容,而无需棘手的标记。但在过去的几天里,我
在 CSS 中,我可以这样做: http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png http://s1.ipicture.ru/uploads/20
问题作为标题,我正在学习sparkSQL,但我无法很好地理解它们之间的区别。谢谢。 最佳答案 spark.table之间没有区别& spark.read.table功能。 内部 spark.read.
我正在尝试根据 this answer 删除表上的非空约束.但是,它似乎没有在 sqlite_sequence 中创建条目。这样做之后,即使我可以在使用测试表时让它正常工作。 有趣的是,如果我备份我的
var otable = new sap.m.Table();//here table is created //here multiple header I'm trying to create t
下面两种方法有什么区别: 内存 性能 答: select table.id from table B: select a.id from table a 谢谢(抱歉,如果我的问题重复)。 最佳答案 完
我尝试在表格后添加点,方法是使用 table::after 选择器创建一个点元素并使用 margin: 5px auto 5px auto; 将其居中。它有效,但似乎在第一个表格列之后添加了点,而不是
我正在设计一个可以标记任何内容的数据库,我可能希望能够选择带有特定标记的所有内容。 我正在为以下两个选项而苦苦挣扎,希望得到一些建议。如果有更好的方法请告诉我。 选项A 多个“多对多”连接表。 tag
"center" div 中的下表元素导致 "left" div 中的内容从顶部偏移几个像素(在我的浏览器中为 8 ).在表格之前添加一些文本可消除此偏移量。 为什么?如何在不要求在我的表格前添加“虚
我是一名优秀的程序员,十分优秀!