html - 为什么 IE 会切断文字宽度,但在其他浏览器中却没有
问题描述
我正在为我的网站创建我自己的 IOS 样式版本,例如通知中心,它还没有完成,但我通常使用颜色编码的 div 和元素来查看我的方式,但我注意到 id 调用 #label AKA 元素以绿色表示通知在 Internet Explorer 中中断。
但在 chrome 和其他浏览器中它不会被切断。
那么为什么会这样,我怎样才能防止 IE 削减 id 调用标签的宽度呢?
这是我的代码
html{
height:100%;
background: url('https://pbs.twimg.com/media/DTV_XvDVMAE39aE.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: black;
font-family: raleway;
color: white;
}
#notification-system{
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
height: 100%;
width: 100%;
top: 0;
right:0;
left: 0;
bottom: 0;
}
#internal-container{
background-color: dodgerblue;
position: fixed;
width: 80%;
height: 100%;
left: 0;
right: 0;
margin: auto;
}
#label{
position: absolute;
top: 0;
right: 0;
left: 0;
margin-top: 24px;
margin-left: auto;
margin-right: auto;
width: 165px;
background-color: green;
font-size: 30.10px;
}
#app-container{
background-color: red;
width: 100%;
position: absolute;
top: 82px;
left: 0;
right: 0;
bottom: 26px;
overflow-y: auto;
overflow-x: hidden;
}
.app{
background-color: gray;
position: relative;
}
.app .icon-container{
background-color: gold;
background-color: rgba(0, 0, 0, 0.3);
height: 35px;
width: 35px;
position: absolute;
}
.app .icon{
background-color: gold;
height: 25px;
width: 25px;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
.app .info-container{
background-color: brown;
width: 100%;
position: relative;
margin-left: 35px;
top: 0;
}
.app .name-container{
height: 35px;
background-color: forestgreen;
background-color: rgba(0, 0, 0, 0.3);
position: relative;
display: flex;
}
.app .name{
height: 16px;
font-size: 13px;
background-color: brown;
margin-top: auto;
margin-bottom: auto;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 70px;
font-weight: bold;
}
.app .delete{
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto;
padding-right: 40px;
height: 18px;
width: 18px;
cursor: pointer;
}
.app .notification{
background-color: blue;
height: 60px;
margin: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
display: flex;
}
.app .notification .details-container{
background-color: black;
margin: auto;
position: relative;
overflow: hidden;
width: 100%;
height: 48px;
}
.app .notification .app-tracker-name{
height: 16px;
font-size: 12px;
color: red;
font-weight: bold;
background-color: gold;
margin-top: 0;
margin-bottom: 0;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 35px;
}
.app .notification .info{
height: 16px;
font-size: 12px;
background-color: tan;
margin-top: 0;
margin-bottom: 0;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 35px;
}
.app .notification .time-and-date{
height: 16px;
font-size: 12px;
background-color: brown;
margin-top: 0;
margin-bottom: 0;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 35px;
}
.show-more-container{
background-color: silver;
height: 28px;
position: relative;
margin-right: 35px;
}
.show-more{
background-color: purple;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 20px;
width: 40px;
color: red;
font-weight: bold;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#close-container{
background-color: rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(255, 255, 255, 0.3);
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 25px;
margin: auto;
}
#close{
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
height: 15px;
margin: auto;
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
</style>
<div id='notification-system'>
<div id='internal-container'>
<h1 id='label'>Notifcations</h1>
<div id='app-container'>
<div class='app'>
<div class='icon-container'>
<img class='icon' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IMessage_logo.svg/768px-IMessage_logo.svg.png'>
</div><!--<icon-container>-->
<div class='info-container'>
<div class='name-container'>
<p class='name'>Face TIme jdhfjhsdjkhsjdk jsdhjkfhsd sdhjfsd fhsdhfsn fdgsedfsdjhbkjsdnjksdkjnfjkjksewdnjkfsd jhsdjkjfkjklsdjkljsdkjsfd jsdkljdskfljklsdf klsdjkljsfdkljfdskljsdfklj</p>
<img class='delete' src='https://promotions.newegg.com/microsoft/15-2820/img/icon_closeButton_256.png'>
</div><!--name-container>-->
<div class='notification'>
<div class='details-container'>
<p class='app-tracker-name'>Face Time</p>
<p class='info'>Missed FaceTime Call</p>
<p class='time-and-date'>4:30PM 1-1-2019</p>
</div><!--</details-container>-->
</div><!--</notification>-->
<div class='notification'>
<div class='details-container'>
<p class='app-tracker-name'>Face Time</p>
<p class='info'>Missed FaceTime Call</p>
<p class='time-and-date'>4:30PM 1-1-2019</p>
</div><!--</details-container>-->
</div><!--</notification>-->
<div class='notification'>
<div class='details-container'>
<p class='app-tracker-name'>Face Time</p>
<p class='info'>Missed FaceTime Call</p>
<p class='time-and-date'>4:30PM 1-1-2019</p>
</div><!--</details-container>-->
</div><!--</notification>-->
<div class='notification'>
<div class='details-container'>
<p class='app-tracker-name'>Face Time</p>
<p class='info'>Missed FaceTime Call</p>
<p class='time-and-date'>4:30PM 1-1-2019</p>
</div><!--</details-container>-->
</div><!--</notification>-->
<div class='notification'>
<div class='details-container'>
<p class='app-tracker-name'>Face Time</p>
<p class='info'>Missed FaceTime Call</p>
<p class='time-and-date'>4:30PM 1-1-2019</p>
</div><!--</details-container>-->
</div><!--</notification>-->
<div class='show-more-container'>
<p class='show-more'>More</p>
</div><!--</show-more-container>-->
</div><!--</info-container>-->
</div><!--</app>-->
</div><!--</app-container>-->
<div id='close-container'>
<img id='close' src='https://www.freeiconspng.com/uploads/up-white-arrow-clip-art-3.png'>
</div><!--</close-container>-->
</div><!--</internal-container>-->
</div><!--</notification-system>-->
解决方案
position: absolute;
默认情况下,元素会缩小到其内容的宽度。您确实通过设置覆盖了此默认行为
一个)left: 0; right: 0;
它告诉浏览器将其拉伸到参考元素的 100% 宽度;
和
b)width: 165px;
这也覆盖了默认行为(以及您之前从 a) 定义的行为)。
要恢复它,请删除right: 0;
和width: 165px;
,然后替换left: 0;
为left: 50%;
。这会将容器从参考元素的 50% 水平位置开始。现在您需要通过将容器自身宽度的一半向左移动来更正位置transform: translateX(-50%);
:
html {
height: 100%;
background: url('https://pbs.twimg.com/media/DTV_XvDVMAE39aE.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: black;
font-family: raleway;
color: white;
}
#notification-system {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
height: 100%;
width: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
#internal-container {
background-color: dodgerblue;
position: fixed;
width: 80%;
height: 100%;
left: 0;
right: 0;
margin: auto;
}
#label {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
margin-top: 24px;
margin-left: auto;
margin-right: auto;
background-color: green;
font-size: 30.10px;
}
#app-container {
background-color: red;
width: 100%;
position: absolute;
top: 82px;
left: 0;
right: 0;
bottom: 26px;
overflow-y: auto;
overflow-x: hidden;
}
.app {
background-color: gray;
position: relative;
}
.app .icon-container {
background-color: gold;
background-color: rgba(0, 0, 0, 0.3);
height: 35px;
width: 35px;
position: absolute;
}
.app .icon {
background-color: gold;
height: 25px;
width: 25px;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
.app .info-container {
background-color: brown;
width: 100%;
position: relative;
margin-left: 35px;
top: 0;
}
.app .name-container {
height: 35px;
background-color: forestgreen;
background-color: rgba(0, 0, 0, 0.3);
position: relative;
display: flex;
}
.app .name {
height: 16px;
font-size: 13px;
background-color: brown;
margin-top: auto;
margin-bottom: auto;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 70px;
font-weight: bold;
}
.app .delete {
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto;
padding-right: 40px;
height: 18px;
width: 18px;
cursor: pointer;
}
.app .notification {
background-color: blue;
height: 60px;
margin: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
display: flex;
}
.app .notification .details-container {
background-color: black;
margin: auto;
position: relative;
overflow: hidden;
width: 100%;
height: 48px;
}
.app .notification .app-tracker-name {
height: 16px;
font-size: 12px;
color: red;
font-weight: bold;
background-color: gold;
margin-top: 0;
margin-bottom: 0;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 35px;
}
.app .notification .info {
height: 16px;
font-size: 12px;
background-color: tan;
margin-top: 0;
margin-bottom: 0;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 35px;
}
.app .notification .time-and-date {
height: 16px;
font-size: 12px;
background-color: brown;
margin-top: 0;
margin-bottom: 0;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 35px;
}
.show-more-container {
background-color: silver;
height: 28px;
position: relative;
margin-right: 35px;
}
.show-more {
background-color: purple;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 20px;
width: 40px;
color: red;
font-weight: bold;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#close-container {
background-color: rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(255, 255, 255, 0.3);
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 25px;
margin: auto;
}
#close {
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
height: 15px;
margin: auto;
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<div id='notification-system'>
<div id='internal-container'>
<h1 id='label'>Notifcations</h1>
<div id='app-container'>
<div class='app'>
<div class='icon-container'>
<img class='icon' src='https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IMessage_logo.svg/768px-IMessage_logo.svg.png'>
</div>
<!--<icon-container>-->
<div class='info-container'>
<div class='name-container'>
<p class='name'>Face TIme jdhfjhsdjkhsjdk jsdhjkfhsd sdhjfsd fhsdhfsn fdgsedfsdjhbkjsdnjksdkjnfjkjksewdnjkfsd jhsdjkjfkjklsdjkljsdkjsfd jsdkljdskfljklsdf klsdjkljsfdkljfdskljsdfklj</p>
<img class='delete' src='https://promotions.newegg.com/microsoft/15-2820/img/icon_closeButton_256.png'>
</div>
<!--name-container>-->
<div class='notification'>
<div class='details-container'>
<p class='app-tracker-name'>Face Time</p>
<p class='info'>Missed FaceTime Call</p>
<p class='time-and-date'>4:30PM 1-1-2019</p>
</div>
<!--</details-container>-->
</div>
<!--</notification>-->
<div class='notification'>
<div class='details-container'>
<p class='app-tracker-name'>Face Time</p>
<p class='info'>Missed FaceTime Call</p>
<p class='time-and-date'>4:30PM 1-1-2019</p>
</div>
<!--</details-container>-->
</div>
<!--</notification>-->
<div class='notification'>
<div class='details-container'>
<p class='app-tracker-name'>Face Time</p>
<p class='info'>Missed FaceTime Call</p>
<p class='time-and-date'>4:30PM 1-1-2019</p>
</div>
<!--</details-container>-->
</div>
<!--</notification>-->
<div class='notification'>
<div class='details-container'>
<p class='app-tracker-name'>Face Time</p>
<p class='info'>Missed FaceTime Call</p>
<p class='time-and-date'>4:30PM 1-1-2019</p>
</div>
<!--</details-container>-->
</div>
<!--</notification>-->
<div class='notification'>
<div class='details-container'>
<p class='app-tracker-name'>Face Time</p>
<p class='info'>Missed FaceTime Call</p>
<p class='time-and-date'>4:30PM 1-1-2019</p>
</div>
<!--</details-container>-->
</div>
<!--</notification>-->
<div class='show-more-container'>
<p class='show-more'>More</p>
</div>
<!--</show-more-container>-->
</div>
<!--</info-container>-->
</div>
<!--</app>-->
</div>
<!--</app-container>-->
<div id='close-container'>
<img id='close' src='https://www.freeiconspng.com/uploads/up-white-arrow-clip-art-3.png'>
</div>
<!--</close-container>-->
</div>
<!--</internal-container>-->
</div>
<!--</notification-system>-->
推荐阅读
- php - 带有 php 开发服务器的 Macports 未连接到 mariadb。mysql服务器已经消失了
- node.js - 当我明确锁定整个表时,为什么 postgres 会同时给出行更新错误
- r - R - 为什么我的函数似乎可以工作但不能更新列表中的小标题?
- c++ - Visual Studio:用户定义的构造函数更改对象生命周期
- r - 在 R 中加入两个数据框和两列 [日期时间列之一]
- html - 当我尝试更新表中的值时,我得到 java.lang.NumberFormatException: For input string: "{id}(id=1)"
- python - 我如何使用 OneHotEncoder 和 ColumnTransformer - ValueError: could not convert string to float: 'low'
- laravel - 在 Laravel 8 中使用 yajra 数据表加载 DataTable where select
- r - 有没有办法让 R 从 Outlook 电子邮件中读取信息?
- android - 评估根项目“XXXX”时出现问题(Android Studio)