CSS显示IE的内联块问题
CSS 显示 IE 的内联块问题
内联块级元素（例如 <div> 和 <span>）在 Internet Explorer (IE) 浏览器中常常会引发一些显示问题。以下是一些常见的问题及解决方案：
问题 1：元素浮动
当 IE 的 float 属性被设置为 left 或 right 时，内联元素可能会与包含它们的元素错位。
解决方案：
使用 display: inline-block 或 display: inline 属性代替 float，这将保持内联元素在文档流中并避免浮动问题。
<!-- 使用 display: inline-block; -->
<div style="display:inline-block;">
<div>Inline Block</div>
</div>
<!-- 使用 display: inline; -->
<div style="display:inline;">
<div>Inline</div>
</div>问题 2：元素之间的高度差
在 IE 浏览器中，内联元素之间可能会出现高度差。
解决方案：
使用 vertical-align: top 或 vertical-align: bottom 属性，将内联元素与相邻的 display: inline-block 或 display: inline 元素对齐。
<!-- 使用 vertical-align: top; -->
<div style="display:inline-block; vertical-align:top;">
<div>Inline Block</div>
</div>
<!-- 使用 vertical-align: bottom; -->
<div style="display:inline-block; vertical-align:bottom;">
<div>Inline Block</div>
</div>问题 3：行高的差异
在 IE 浏览器中，内联元素和它的父元素之间可能会出现行高差异。
解决方案：
使用 line-height 属性确保内联元素和它的父元素具有相同的行高。
<!-- 父元素设置 line-height 与内联元素相等 -->
<div style="display:inline-block; line-height:15px;">
<div style="display:inline;">Inline</div>
</div>问题 4：内联元素的高度和宽度与父元素不匹配
在 IE 浏览器中，内联元素的高度和宽度可能会与父元素不匹配。
解决方案：
使用 height 和 width 属性确保内联元素具有与父元素相同的高度和宽度。
<!-- 父元素设置内联元素的高度和宽度 -->
<div style="display:inline-block; width:100px; height:100px;">
<div style="display:inline;">Inline</div>
</div>通过使用上述解决方案，您可以确保在 Internet Explorer 浏览器中内联元素不会出现不兼容的问题。
相关·内容
据我所知，vertical-align将内联块元素与文本字体的基线对齐。当内联块元素中有一个文本同级时，这样做是有意义的，这样我们就可以知道作为基线的字体大小。
但是，如果兄弟姐妹不是文本，而是另一个内联块元素呢？取其基线的文本字体是什么？
例如：
<div style="padding: 8px 16px; background-color: green">
<div style="display:inline-block;font-size:18px;vertical-align:text-top">Hello</d
浏览 1提问于2021-02-14得票数 0
回答已采纳
5回答
我正在开发一个HTML5导航，在这里我使用了这个HTML：
<menu>
<li><a href="#">Test</a></li>
<li><a href="#" class=clip>Test</a></li>
<li><a href="#" class=clip>Test</a></li>
<li><a href="#"
浏览 4提问于2013-10-01得票数 0
回答已采纳
简介：我有一个包含其他三个div(片段)的<div>作为块(main)。我要给出我的绝对位置。首先效果很好。但是因为我不知道孩子为什么会在屏幕上的两个不同的位置上显示背景和文本：
截图：红色、黄色、蓝色的长方形是“碎片”，主部分在后面。下面的文字“你好世界”，“随机文本”等应该显示在彩色背景的顶部，因为它只是每个div片的innerHTML。不仅是背景和文字区域都在接收鼠标事件。右边是控制台，每个部分都有一些样式。
问题：，我需要理解这是怎么可能的？哪些CSS属性会导致这种情况呢？我在JavaScript中设置所有CSS-属性。因此，目前还没有样式表。
<div
浏览 1提问于2018-08-02得票数 0
回答已采纳
4回答
当我试图将两个div放在一起时，我遇到了一个问题。
display: inline删除我的边框，而不是将两个div放在同一行上。
请告知：
.gig {
outline: 1px solid green;
width: 400px;
height: 200px;
display: inline;
}
<div class="gig">
<h3>The band</h3>
<p><em>We love to play</em></p>
<
浏览 7提问于2016-02-18得票数 0
回答已采纳
我似乎不明白为什么使用display:inline-block会导致这个<div>元素在隐藏其包含的元素时以某种方式获得高度。这种情况在display:block中不会发生。
html：
<div style="display:inline-block;"><input type="hidden" /></div>
<div>Gap above created by inline-block</div>
<div style="display:block;">&
浏览 3提问于2013-11-20得票数 38
回答已采纳
4回答
我有这个框，它有三个内联块文本元素，左文本和右文本都在工作，但中间的文本没有正确的中心。
div.row #banner {
padding-top: 0;
margin-bottom: 0.8em;
background-color: #FF9935;
border: 1px solid #ccc;
color: #000;
}
div.row #banner p {
margin-bottom: 0;
}
div.row #banner .shordy {
font-family: lato, serif;
font-size: 1.1em;
f
浏览 3提问于2017-11-20得票数 0
我正在尝试制作一个相当复杂的图像和信息网格(几乎就像Pinterest)。具体地说，我正在尝试将一组<ul>s直接内联到另一组。我让它工作了，但是有一个方面导致了问题，所以我试着询问这一小部分，以避免整个问题的复杂化。
为了水平对齐图像和它们的信息，我们使用内联<li>s和它们内部的其他内联块级元素。除了<li>s几乎没有高度之外，大多数情况下一切都正常工作。
超文本标记语言和CSS是，如果你想弄乱它，除了下面：
HTML：
<div>
<ul class="Container">
<li>
浏览 0提问于2012-07-11得票数 4
回答已采纳
3回答
我有两个divB (divA和divB)。我使用显示:内联块来将它们并排放置。每个div都有一个宽度百分比。问题是我的布局是响应性的，我尝试过使用float，但是它破坏了我的布局。在较小的屏幕上，两个div不是内联的，DivB在DivA下移动。
.divA {
background-color:#CCC;
height:40px;
width:40px;
display:inline-block;
vertical-align:top;
margin-right:15px;
}
.divB {
background-color:#0FF;
height:auto;
width:85%;
di
浏览 7提问于2016-02-22得票数 2
回答已采纳
2回答
我有两个内嵌的div，第二个使用垂直对齐:top。问题是，第二个div以h2开头，然后是一些内容，而根据定义，h2不听垂直对齐。因此，h2正在拖下其余的内容。我该怎么解决这个问题？
<div style="display:inline;">
<img src="" width=300 height=600>
</div>
<div style="display:inline; vertical-align:top;">
<h2>Heading</h2>
<p>
浏览 3提问于2013-11-30得票数 1
回答已采纳
2回答
我无法水平对齐内联块元素.根据我所发现的，内联块元素中有一些基线对齐，但我无法理解如何对齐。如果我使用“垂直对齐:顶部”，它是有效的。我有以下疑问：
基线是如何在此示例代码中定位的。
在删除'display :内联块‘的.图标栏类时，前三个元素正确对齐。多么?
在上一步之后将ul标记为'display : inline‘时，它将对齐。但不能用“显示:内联块”
如何水平对齐元素。如果没有“垂直对齐”属性，它能完成吗？
可以将元素标记为显示:内联是元素的父级显示:块。类似地，会“显示:内联块”父级和“显示:块”子元素会引起什么问题？另外，在“display:in
浏览 1提问于2017-02-09得票数 3
3回答
我有以下几点：
#innerLabels,
#innerFields {
display: inline-block;
width: 200px;
height: 200px;
border-style: solid;
border-width: 1px;
vertical-align: top;
}
.innerLabel {
display: table;
border-style: solid;
border-width: 1px;
height: 100px;
width: 80%;
}
.innerLabel div {
displ
浏览 3提问于2016-07-05得票数 1
回答已采纳
3回答
我感到沮丧的是，一旦浏览器窗口调整大小，这个漂亮的小菜单就会自动换行。无论窗口是否调整大小，如何防止换行，并使其保持固定状态？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#menu{
border-top: 1px solid #FFF;
padding:0;
margin:0;
position: fixed;
top: 30px;
left: 0px;
font-size: 8pt;
width
浏览 0提问于2012-10-27得票数 4
回答已采纳
我遇到了一个问题，我的div的计算高度是不正确的。引用来自jsFiddle的javascript部分。
从右边看，你可以看到，divs和elb都没有占据足够的空间，使得div.row的高度变得那么高。
在Chrome中，我得到的高度是24 4px (当内容应该更小时，20 4px的内容和4 4px的填充)。
在IE中，我得到的高度是22.4px (所以是18.4px的内容，这仍然是错误的)。
我认为高度应该是17 of或18 of(实际内容是13 of或14 of)。
这是小提琴。在这里，我还添加了一个按钮来切换内容的打开和关闭，它只留下一个div显示:内联块在那里。
这里是HTML，
浏览 9提问于2014-02-27得票数 1
回答已采纳
4回答
昨天和今天，我花了无数个小时想办法解决这个问题。我不敢相信CSS没有一个简单的方法来处理这个问题。
本质上，我在span class="name“中有一些文本，其长度不是固定的。在某些情况下，它可能会溢出到下一行。如何在容器内垂直对齐。
更具体地说，如何在我的容器中垂直对齐"ABC父子公司有限责任公司“？
<div class="container">
<span class="name">ABC Father And Sons Company LLC </span>
<a href="
浏览 6提问于2014-05-19得票数 3
回答已采纳
2回答
在下面的代码中，为什么我需要将vertical-align: top设置为这两个元素以缩小它们之间的差距？如果空白只发生在第一个元素上，难道我不能将其设置为vertical-align: top以缩小差距吗？
如果仅将垂直对齐属性分配给.test，则会发生以下情况：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
浏览 5提问于2020-08-25得票数 0
3回答
我现在正在做一个小任务，页面只能在IE中正确显示。未显示任何div background-color。
HTML
<body bgcolor="#949191">
<div id="heading">
<div id="banner">
<a href="index.html">
<img src="images/banner.jpg" alt="Crown Awards" style="borde
浏览 1提问于2013-04-06得票数 0
回答已采纳
4回答
doc.html
.column {
background-color: orange;
width: 75%;
vertical-align: top;
display: inline-block;
height: 200px;
}
.nav {
vertical-align: top;
display: inline-block;
width: 25%;
background-color: lightgreen;
height: 200px;
}
* {
box-sizing: border-box;
padding: 0px;
ma
浏览 4提问于2016-10-02得票数 2
回答已采纳
2回答
为什么我的导航下面有一小块地方。我已将导航的边距设置为0，并将其下方的所有内容都设置为0。尽管如此，空间并没有消失。这是我的加价。
<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<style>
body{
width: 964px;
background-color: white;
margin: 0 auto;
border: 1px solid
浏览 1提问于2015-07-26得票数 0
这是可以的：
<html>
<head>
<title>tabs</title>
<style>
li {
display:inline;
margin:0 90px;
background:#777777 none repeat scroll 0 0;
}
li a {
padding:6px 12px;
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}
</style>
</head>
浏览 7提问于2009-06-24得票数 0
2回答
首先，让我们看一段代码：
div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { line-height:1.7; }
<div><span>123<br>456<br>789<br>000</span></div>
为什么span的line-height未被使用？
line-height仍然是200px，但是当我们将span的display属性设置为inline-block时，是否使用了
浏览 0提问于2012-08-06得票数 70
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
