following this https://jsbin.com/limevid/1/edit?html,css,output , I notice that paragraph in IE starts from the top of the container instead in Chrome, paragraph overlap the container.
p {
display: block;
background:orange;
width: 50px;
line-height: 50px;
margin-left: 10px;
}
Line-height gives the height of the paragraph. I can't change the height of container.
Why does this happen? I want for IE11 the same behavior of Chrome.
Adding margin-top: -20px to P class solves the issue for Internet Explorer.
We need to apply this style only for IE browser. so you need to write CSS like below.
It will give same result in Chrome, IE and other browsers.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Page Title</title>
<style>
div {
display: flex;
flex-direction: column;
flex: 1 1 auto;
justify-content: center;
text-align: center;
border: 1px solid #000;
height: 20px;
}
p {
display: block;
background:orange;
width: 50px;
line-height: 50px;
margin-left: 10px;
}
@media screen and (min-width:0\0) {
p {margin-top: -20px;
display: block;
background:orange;
width: 50px;
line-height: 50px;
margin-left: 10px;
}
}
</style>
</head>
<body>
<div>
<p>1</p>
</div>
</body>
</html>Output in IE and Chrome:
As you know, in many scenarios, flex renders differently in Chrome and IE.
In this case, justify-content: center is being interpreted differently by each browser.
If you want the content item to overlap in IE, add margin-top: auto to the flex item.
Or, you can use CSS positioning for full compatibility with both browsers.
div {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
border: 1px solid #000;
height: 20px;
position: relative;
}
p {
background: orange;
width: 50px;
line-height: 50px;
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}<div>
<p>1</p>
</div>More details about this centering method:
