小编myf*_*myf的帖子
为什么在 Firefox 中，图像呈现全宽的嵌套居中 Flex 项目？
我有一些嵌套display: flex;容器。在 Chrome/Edge 中，itemdiv 按预期显示，但在 Firefox 110.0.1 上，divitem占据了整个水平空间wrapper（100% 宽度）。
哪些 CSS 属性会像在 Edge 中一样在 Firefox 上显示容器，或者哪个浏览器根据规范正确显示容器？
\n微软边缘：
\n
火狐浏览器，图像 1024\xc3\x971024 像素：
\n
火狐浏览器，图像 200\xc3\x97200 像素：
\n
代码：
\n.wrapper {\n outline: aqua solid;\n outline-offset: -3px;\n background-color: black;\n color: white;\n display: flex;\n flex-direction: column;\n /* --> */ align-items: center;\n justify-content: center;\n width: 300px;\n height: 100px;\n}\n\n.item {\n outline: magenta solid;\n outline-offset: -13px;\n background-color: maroon;\n display: flex;\n place-content: …推荐指数
解决办法
查看次数
您应该将预连接与样式表一起使用吗？
当您想要包含 Google Fonts 中的字体时，它建议 ([1]) 您这样做：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
预连接到fonts.gstatic.com是有意义的，因为浏览器只有在下载样式表后才会发现该域。但是，当样式表的链接就在fonts.googleapis.com之后时，预连接到 fonts.googleapis.com 的意义何在？浏览器不会同时处理这两个吗？
[1] 请参阅： https: //fonts.google.com/share?selection.family =Roboto，选择某种样式，然后单击右上角的公文包图标。）
推荐指数
解决办法
查看次数
设置document.body.outerHTML会创建空头.为什么？
重置outerHTML属性document.body有一个奇怪的副作用:它<head></head>在DOM之前添加额外的空,就在之前body:
head { display: inline; counter-increment: h; border: 1px solid; }
head:last-of-type::after { content: 'Head elements count: ' counter(h); }
[onclick]::after { content: attr(onclick); }<button onclick="document.body.outerHTML=document.body.outerHTML"></button>所有浏览器似乎都是一致的.我被告知它被指定为这种方式,但是无法在这个问题上挖掘权威的标准立场,甚至在讨论档案中都没有提及.你知道这方面的背景,还是有一些技术原因必须这样？任何的想法？
推荐指数
解决办法
查看次数
使用 rgba 值时的抗锯齿边框半径问题
我遇到一个问题，当我使用边框半径结合 rgba 值颜色（例如 rgba(255,255,255,.8)，然后使用 abox-shadow使盒子看起来羽化）时，我遇到的问题是角不是实心的，如图所示。
左上角细节：
可以看出，当 border-radius 设置到位时，将边框半径与其他 CSS 元素结合使用时，边缘会产生奇怪的透明边缘。
我已经尝试了很多，但没有取得多大成功，这是一个代码尝试，因为我想在另一个项目中尝试这个，但只是简单地复制在这里： https: //jsfiddle.net/01u7gbxa/1/
代码本身可以应用于任何对象，因此看起来解析结果相同：
background:rgba(0,0,0,.8);
box-shadow:0 0 15px 30px rgba(0,0,0,.8);
border-radius:60px;
有谁知道这是否可以解决？
预先感谢您提供更多信息。
推荐指数
解决办法
查看次数
灵活布局：这可能吗？
编辑\n请记住，每个单元格可以有不同的宽度和高度。这与这篇文章不同：CSS-only masonry layout，请参阅参考图片的指导线：
\n
由放置在虚拟 5\xc3\x975 基本网格中的引导线和图块组成的大约 19 列和 17 行在两个轴上重叠。
\n我想要介于网格和弹性布局之间的东西。网格受到单元格大小的限制，而 flex 更强大，但（据我所知）仅限于方向。我想要不同的单元格大小，其中每 5 个单元格的宽度总和相同，并且 5 个列的总和高度相同。就像下图一样。
\n有没有办法使用 CSS 实现类似的布局？
\n
这是我到目前为止所得到的一切：
\nHTML：
\n<div class="calendar">\n <div class="day day1">1</div>\n <div class="day day2">2</div>\n <div class="day day3">3</div>\n <div class="day day4">4</div>\n <div class="day day5">5</div>\n <div class="day day6">6</div>\n <div class="day day7">7</div>\n <div class="day day8">8</div>\n <div class="day day9">9</div>\n <div class="day day10">10</div>\n <div class="day day11">11</div>\n <div class="day day12">12</div>\n <div class="day day13">13</div>\n <div class="day day14">14</div>\n <div class="day day15">15</div>\n …推荐指数
解决办法
查看次数
缩放时,IE11中的SVG背景会被切断
我们正试图在Internet Explorer中显示SVG背景.当使用100%以外的变焦时,我们的图像总会被切断.可以使用以下代码重现:
用这个svg
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="48" stroke="black" stroke-width="3" fill="red" />
</svg>
div {
width: 14px;
height: 14px;
background-size: 14px 14px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' stroke='black' stroke-width='3' fill='red'%3E%3C/circle%3E%3C/svg%3E");
}<div></div>结果如下:
在所有其他浏览器中它渲染得很好.还有其他人遇到过这个bug吗？有解决方法吗？
推荐指数
解决办法
查看次数
CSS :lang() 选择器用于未确定语言的文档中的元素
是否可以定位没有语言设置或继承的元素，即使用未指定（“未知”）语言的元素？
\n琐事
\nHTML 文档或元素语言可以使用HTMLlang属性设置，例如：
<html lang="en">\n<h1>Dictionary</h1>\n<dl>\n<dt><abbr lang="en-Mors">-... - .--</abbr>\n<dd><i lang="fr-Latn">\xc3\xa0 propos</i>\n</dl>\nHTTP或在内容语言标头中使用代码：
HTTP/2 200 OK\n[other headers]\nContent-language: en,en-Brai,fr-Latn\n\n<html>\n<h1>Dictionary</h1>\n[rest of document]\n或者它早已被弃用但仍然有效<meta http-equiv>：
<html>\n <head>\n <meta http-equiv="content-language" content="en,en-Brai,fr-Latn">\n</head>\n<html>\n<h1>Dictionary</h1>\n[rest of document]\n在任何一种情况下，使用:lang(en)CSS 选择器都会匹配示例中的主标题以及所有其他没有lang值不等于或以“en”开头的显式属性的元素。
目标
\n如果发送的文档没有 Content-languageHTTP 标头或<meta>元素且没有 lang属性，是否可以匹配那些不可避免的“未知”语言的元素？
另外，在通过任何上述方式设置语言的文档或 DOM 片段中，是否可以使用lang()CSS 选择器来匹配具有空属性的lang=""元素，从而有效地“选择退出”语言？
HTTP/2 200 OK\n[no content-language header nor meta …推荐指数
解决办法
查看次数
HTML 标题编号意外重置
我希望简单 HTML 网页中的标题能够按层次编号。因此我有：
body {
counter-reset: h1counter;
}
h1:before {
content: counter(h1counter) ".\0000a0\0000a0";
counter-increment: h1counter;
counter-reset: h2counter;
}
h2:before {
content: counter(h1counter) "." counter(h2counter) ".\0000a0\0000a0";
counter-increment: h2counter;
}<h1>Section 1</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
<h1>Section 2</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>
<h1>Section 3</h1>
<h2>Subsection 1</h2>
<h2>Subsection 2</h2>但这显示如下：
1. Section 1
1.1. Subsection 1
1.1. Subsection 2
2. Section 2
2.1. Subsection 1
2.1. Subsection 2
Section 3
3.1. Subsection 1
3.1. Subsection 2
显然，第 2 小节 标题的第二个编号数字<h2>应该是 2，但它不会增加（就好像 …
推荐指数
解决办法
查看次数
H1 中的换行符将元素转变为 VoiceOver 组
出于设计原因，我使用 a <br>inside a，例如：<h1>
<h1>This is a <br>headline</h1>
但请注意，它会将元素变成一个“组”，VoiceOver 将其读取为单独的项目，例如：
标题级别 1“这是一个...标题”第3
组
项目 “这是一个”
“标题”
“空组”
向 only添加aria-hidden="true"或role="presentation"属性<br>会删除“空组”公告，但 VoiceOver 仍将 视为H1“组”。
是否可以在不通过 VoiceOver 将其宣布为“组”的br情况下将元素存在于内部？h1
推荐指数
解决办法
查看次数
标签 统计
css ×6
html ×4
flexbox ×2
box-shadow ×1
dom ×1
javascript ×1
outerhtml ×1
pagespeed ×1
preconnect ×1
svg ×1
voiceover ×1