gpt4 book ai didi

html - 使用 flexbox 在 IE11 中布局不正确

转载 作者:太空狗 更新时间:2023-10-29 13:30:22 24 4
gpt4 key购买 nike

我知道 IE11 中的 flexbox 有很多错误,我需要一些帮助来找出我刚刚制作的简单布局的问题。我在 chrome 上做我的开发工作......

这在 IE11 上根本不起作用:https://codepen.io/anon/pen/ewwOGB

我没有成功尝试“调试”问题,因为我没有找到导致问题的部分。

.parent {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}

.container.segment {
padding: 0 !important;
display: flex !important;
height: 100%;
max-height: 700px;
}

#navigation {
height: 100%;
width: 60px;
border-radius: 3px;
}
#navigation .menu {
writing-mode: tb;
writing-mode: tb-rl;
writing-mode: vertical-lr;
writing-mode: sideways-lr;
transform: rotate(180deg);
text-align: right;
border: 0 !important;
margin: 2em 0;
}

.ui.attached.menu {
width: 100% !important;
max-width: 100% !important;
}

#image {
height: 100%;
width: 400px;
background-color: #ccc;
}

#content {
height: 100%;
overflow-y: auto;
flex: 1;
padding: 2rem;
border-radius: 3px;
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
</head>
<body>

<div class="parent">
<div class="ui raised very padded container segment">
<div id="navigation">
<div class="ui attached stackable borderless menu">
<a class="item">
Item 1
</a>
<a class="item">
Item 2
</a>
<a class="item">
Item 3
</a>
<a class="item">
Item 4
</a>
<a class="item">
Item 5
</a>
<a class="item">
Item 6
</a>
</div>
</div>
<div id="image"></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</body>
</html>

最佳答案

除了导航项与父 div 的底部对齐之外,它在我的 IE11 中完美运行。

为此,将此 css 赋予带有导航 ID 的 div

#navigation{
display: flex;
align-items: flex-start;
}

不过,如果您遇到问题,请尝试添加 IE 兼容性元标记

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

如果没有解决,请分享IE截图

关于html - 使用 flexbox 在 IE11 中布局不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57035366/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com