下面的代码使内容换行，或者使div在窗口中只占浏览器宽度的50%(因此，如果内容宽度超过浏览器宽度的50%，则使内容换行(。但这在mac中并没有发生，它试图占据浏览器100%的宽度，如果内容宽度超过浏览器100%，则会进行包装。为什么会出现这种差异？请参阅jsfiddle中的演示https://jsfiddle.net/sevenu/egtvc95j/4/
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:#E7E9EB;
}
#myDIV {
height:300px;
background-color:#FFFFFF;
}
.bluediv {
background-color:lightblue;
width: fit-content;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<h1>The width: fit-content position: absolute and left 50%<</h1>
<div id="myDIV">
<div class="bluediv">
Lorem ipsum dolor sit amet. Est quidem eius et nihil modi et omnis commodi et error galisum?
</div>
</div>
</body>
</html>
问题在于left: 50%的使用。
尝试如下：
body {
background-color: #E7E9EB;
}
#myDIV {
height: 300px;
background-color: #FFFFFF;
}
.bluediv {
background-color: lightblue;
width: fit-content;
position: absolute;
inset: auto 0; /* left and right = 0*/
margin: auto;
}<h1>The width: fit-content position: absolute and left 50%</h1>
<div id="myDIV">
<div class="bluediv">
Lorem ipsum dolor sit amet. Est quidem eius et nihil modi et omnis commodi et error galisum?
</div>
</div>