Html 为什么可以'；我没看见这个部门吗
我有一个具有以下标记的div：Html 为什么可以'；我没看见这个部门吗,html,css,Html,Css,我有一个具有以下标记的div： <div role="gridcell" title="707676" style="width: 84px;" class="grid-cell">707676</div> 我把真实的页面简化为以下内容。它与原始标记有点不同，特别是css的应用方式，但它似乎重现了这个问题。谁能告诉我为什么我的页面上没有看到707676？我正在查看下面的Firefox示例。真实页面在Edge和Firefox中显示相同的行为 <html> &
<div role="gridcell" title="707676" style="width: 84px;" class="grid-cell">707676</div>
<html>
<head>
<title>Test of element that's not visible</title>
<style>
div {
border-bottom-color: rgb(34, 34, 34);
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: rgb(34, 34, 34);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(34, 34, 34);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(34, 34, 34);
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(34, 34, 34);
cursor: default;
display: block;
float: left;
font-family: "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 13px;
height: 30px;
line-height: 17px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 7px;
padding-left: 4px;
padding-right: 4px;
padding-top: 6px;
position: relative;
horizonal-align: left;
text-align:left;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
width: 84px;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
-moz-user-focus: ignore;
}
</style>
</head>
<body>
<div aria-activedescendant="row_60_8" role="grid" tabindex="0" class="grid-canvas ui-draggable">
<div style="top: 256px; left: 20px; height: 32px; width: 1867px; -moz-user-focus: ignore;" role="row" id="row_60_8">
<div role="gridcell" title="707676" style="width: 84px;" class="grid-cell">707676</div>
</div>
</div>
</body>
</html>
测试不可见的元素
div{
边框底色：rgb（34,34,34）；
边框底部样式：无；
边框底宽：0px；
边界图像起点：0；
边界图像重复：拉伸；
边界图像切片：100%100%100%100%；
边界图像源：无；
边框图像宽度：1；
左边框颜色：rgb（34,34,34）；
左边框样式：无；
边框左宽度：0px；
右边框颜色：rgb（34,34,34）；
右边框样式：无；
右边框宽度：0px；
边框顶部颜色：rgb（34,34,34）；
边框顶部样式：无；
边框顶部宽度：0px；
框大小：边框框；
颜色：rgb（34,34,34）；
游标：默认值；
显示：块；
浮动：左；
字体系列：“-apple system”，BlinkMacSystemFont，“Segoe UI”，Roboto，“Helvetica Neue”，Helvetica，Ubuntu，Arial，无衬线，“apple颜色表情符号”，“Segoe UI表情符号”，“Segoe UI符号”；
字体大小：13px；
高度：30px；
线高：17px；
溢出：隐藏；
溢出x：隐藏；
溢出y：隐藏；
垫底：7px；
左侧填充：4px；
右侧填充：4px；
填充顶部：6px；
位置：相对位置；
水平对齐：左对齐；
文本对齐：左对齐；
文本溢出：省略号；
垂直对齐：中间对齐；
空白：nowrap；
宽度：84px；
-moz边框底色：无；
-moz边框左侧颜色：无；
-moz边框右颜色：无；
-moz边框顶部颜色：无；
-moz用户焦点：忽略；
}
707676
floatleftfont-family: "-apple-system",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Ubuntu,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
float: left;
font-family: "-apple-system",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Ubuntu,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
您已将两行合并为一行
floatleftfont-family: "-apple-system",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Ubuntu,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
float: left;
font-family: "-apple-system",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Ubuntu,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
代码简化后添加 我发现了问题，您已将
位置：relativediv溢出：hiddendivtop:256px256pxdivdiv30px的值，您可以看到它
因为我在对这个问题的评论中提到了这个错误，所以我把它作为一个答案发布了出来
floatleftfont-family: "-apple-system",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Ubuntu,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
应该是
float: left; font-family: "-apple-system",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Ubuntu,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
也
文本对齐左文本溢出：省略号
应该是
文本对齐：左；文本溢出：省略号在代码简化后添加
我发现了问题，您已将位置：relative
指定给父级div
，高度：30px
和溢出：hidden
。HTML中的第二个div
有一个top:256px
，相对于其实际位置将其替换为256px
。由于父级div
具有固定高度且没有溢出，因此div
将隐藏且不可见。尝试将top的值更改为小于30px的值，您可以看到它
因为我在对这个问题的评论中提到了这个错误，所以我把它作为一个答案发布了出来
floatleftfont-family: "-apple-system",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Ubuntu,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
应该是
float: left; font-family: "-apple-system",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Ubuntu,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
也
文本对齐左文本溢出：省略号
应该是
文本对齐：左；文本溢出：省略号您发布的代码运行良好，在Chrome和Firefox中可见，没有问题。我正在运行Mac，因此无法为您在Edge中进行测试。页面中一定有其他内容导致其不可见
<div role="gridcell" title="707676" style="width: 84px;" class="grid-cell">707676</div>
707676
您发布的代码运行良好，在Chrome和Firefox中都可以看到，没有问题。我正在运行Mac，因此无法为您在Edge中进行测试。页面中一定有其他内容导致其不可见
<div role="gridcell" title="707676" style="width: 84px;" class="grid-cell">707676</div>
707676
floatleftfont系列：“-apple系统”、BlinkMacSystemFont、“Segoe UI”、Roboto、“Helvetica Neue”、Helvetica、Ubuntu、Arial、无衬线字体、“苹果颜色表情”、“Segoe UI表情”、“Segoe UI符号”应为浮动：左；字体系列：“-apple system”，BlinkMacSystemFont，“Segoe UI”，Roboto，“Helvetica Neue”，Helvetica，Ubuntu，Arial，无衬线，“apple颜色表情符号”，“Segoe UI表情符号”，“Segoe UI符号”我是遗漏了什么还是我真的能看到|@克莱德洛博，你为什么不把它作为答案发出去？@Soviut:done。还增加了一个错误这很奇怪，我用那个div和那个css制作了一个简单的网页，它显示在Firefox中。我会继续玩它。floatleftfont系列：“-apple系统”，BlinkMacSystemFont，“Segoe UI”，Roboto，“Helvetica Neue”，Helvetica，Ubuntu，Arial，无衬线，“苹果颜色表情”，“Segoe UI表情”，“Segoe UI符号”应为浮动：左；字体系列：“-apple system”，BlinkMacSystemFont，“Segoe UI”，Roboto，“Helvetica Neue”，Helvetica，Ubuntu，Arial，无衬线，“apple颜色表情符号”，“Segoe UI表情符号”，“Segoe UI符号”我是遗漏了什么还是我真的能看到|@克莱德洛博，你为什么不把它作为答案发出去？@Soviut:done。还增加了一个错误这很奇怪，我用那个div和那个css制作了一个简单的网页，它显示在Firefox中。我再玩一会儿。