html - 使用 CSS + 居中,IE8 显示彼此相邻的内联 div

标签 html css internet-explorer-8

更新:事实证明,巴特的回答是正确的。 4*64+8*1 = 264px 宽的 div 包含其他 div,它们的 1px 边框给出了我想要的效果。我修改了示例代码以包含他的答案。谢谢巴特。

我再次为 CSS 而苦恼。此示例使用表格以我希望的大小显示 1、2、3、4。当我尝试对 CSS 执行相同操作时,div 折叠为内容的大小,而不是指定的高度/宽度。目标浏览器:IE8

<!doctype html>
<html>
<head>
<style type="text/css" media="screen"> 
#one, #two, #three, #four, #five, #six, #seven, #eight 
{
    height: 64px; width: 64px;
    border: 1px solid black;
    background-color: lightgreen;
}
#five, #six, #seven, #eight { float:left; }
#cont {width:264px;}
</style>
</head>
<body>
<center>

<table><tr>
<td><div id="one">1</div></td>
<td><div id="two">2</div></td>
<td><div id="three">3</div></td>
<td><div id="four">4</div></td>
</tr></table>

<div id="cont">
<div id="five">5</div>
<div id="six">6</div>
<div id="seven">7</div>
<div id="eight">8</div>
</div>

</center>
</body>
</html>

最佳答案

添加padding和margin,否则浏览器会忽略高度和宽度。

很好地尝试使用表格进行布局!

关于html - 使用 CSS + 居中,IE8 显示彼此相邻的内联 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1615127/

相关文章:

javascript - Onclick 仅重新加载 div

javascript - Js(和 HTML、CSS)中的背景图像幻灯片

css - 更改 IE 浏览器的布局

支持 Internet Explorer 6 的 HTML5 视频 >?

html - 返回页面后IE8 padding的css会消失

html - 修复了标题和响应式网站问题

html - 为什么当我点击某一行的按钮时,却继续传递第一行的值

jquery - 不要在移动设备中使用 Bootstrap 显示响应段落

html - 表格形式的数据溢出IE 8中的div,表格中断

internet-explorer-8 - IE7/8能否显示位置:relative elements in front of position:absolute ones?