Question

我有一个具有以下标记的div：

<div role="gridcell" title="707676" style="width: 84px;" class="grid-cell">707676</div>

如果我在Edge或Firefox的检查器中选择它，我可以看到它的位置，但我看不到它的内容。你能告诉我为什么吗？这是CSS：

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;
floatleftfont-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;
text-alignlefttext-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;

我把真实页面简化为以下内容。它与原始标记有所不同，特别是在如何应用css方面，但它似乎重现了这个问题。谁能告诉我为什么我的页面上看不到707676？如果是Firefox，我正在查看以下示例。真实页面在Edge和Firefox中显示相同的行为。

<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>

Answer 1

您已将两行合并为一行。

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";

Answer 2

代码简化后添加

我发现了这个问题，您已通过position: relative和div将height:30px发送给了父overflow:hidden。 HTML中的第二个div有一个top: 256px，相对于其实际位置，它将256px替换为div。由于父div具有固定的高度且没有溢出，30px被隐藏且不可见。尝试将top的值更改为小于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";

应该是

text-alignlefttext-overflow: ellipsis;

另外

text-align:left; text-overflow: ellipsis;

应该是

mysql -u root -p

Answer 3

您发布的代码运行良好，在Chrome和Firefox中可见而没有问题。我正在运行Mac，因此无法在Edge中为您进行测试。页面中必须有其他内容导致其无法显示。

<div role="gridcell" title="707676" style="width: 84px;" class="grid-cell">707676</div>

CodePen Example code

为什么我看不到这个div

3 个答案: