那些遇到过的问题

小编Tig*_*igt的帖子

宽度:100%与宽度:继承

我的理解是width: 100%让元素的宽度与其父元素的宽度相同,而width: inherit只有在明确指定父元素的宽度时才这样做.这种理解是否正确？

如果是这样,那么在我看来,当它width: inherit起作用时,它width: 100%总会起作用,所以你总是可以使用后者.那么,写作的目的是width: inherit什么？什么时候变得有用？

如果我的理解是错误的,两者之间有什么区别？

与之相似height.

html css

saw*_*awa
2018 04-14
50
推荐指数
1
解决办法
4万
查看次数

如何在不考虑Firefox中的宽高比的情况下缩放SVG背景图像？

我在background-image流体高度和宽度的元素上设置了CSS .它是一个SVG,其预期的行为是它可以在任何必要的方向上伸展以覆盖整个元素的区域.在Chrome,Safari,甚至是错误的'Internet Explorer 9'中,缩放都是我想要的:

正确拉伸的背景图片

但在Firefox(包括桌面和移动设备)中,输出更像是:

不正确拉伸的背景图像会保留其纵横比并且不会填充空间

经过一番挖掘,看起来Firefox对SVG渲染的看法比其他浏览器更严格,因为它严格遵守规范的最新版本.(Opera Mini的也没有渲染这个背景图片(如果启用),因为它不缩放图像下来,并给予了夏季雷暴认真解决规范的普雷斯托引擎的传统,它可以料想的一样更新的办法,火狐确实.)

您可以在http://ti.gt/上看到我正在处理的实况页面.我还提供了以下我正在使用的代码:

HTML

<h1 class="blog-title-wrapper">
  <a href="/" class="blog-title pop-out">{Title}</a>
</h1>
Run Code Online (Sandbox Code Playgroud)

CSS

.blog-title {
    background: none;
    color: #fff;
    font: normal normal 4em "Alternate Gothic", sans-serif;
    margin: 0 0 0 .1em;
}

.blog-title-wrapper {
    margin: -1px 0 0 0;
    padding-bottom: 20%;
    background: #d23e2c;
    background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMzMzIDc1MCIgdmVyc2lvbj0iMS4xIj48cGF0aCBkPSJtIDAsMCAxMzMzLDAgMCwzMjAuNTMgLTcyLjY3LDQ4LjQyIDUyLjQ1LDM3LjU3IC0xMjYuMzEsNTIuODQgNTAuMTMsMTM2LjE5IC0xOS45OCwzNy4yNiAtMzkuNDcsLTExLjcxIC0zOC43NSw0MC40NyAtNjMuMzIsLTEyLjA3IC0zMC40NCwtMTM1LjYgLTcuOTQsMy4yOCAyNC43NCwxNDAuOTUgLTM4LjEzLDMwLjI2IC00NC4zNSwtMy4zMyAtMzUuODMsMjMuMzkgLTQ4LjkzLC0xMy4yMiAtMzguMjQsLTE0MS40OCAtMTAuNTcsMy42OCA2LjIsMTQ4Ljk3IC0zMy44OCwyMC40NiAtMjUuMjYsLTEzLjg1IC0yMi40OCwzMS40OSAtMjcuMzYsLTIyLjMyIC0zMiwyNC4zNCBMIDY4MC41NSw3MTguNiA2NjQuNyw1NjQgbCAtMTcuMDgsMC45MSAtMjEuODgsMTU5LjczIC0yOS4xNywyNS4zNiAtMS43MiwwIC0yNy44NCwtMjMuMDIgLTIzLjMsMTMuODggLTIxLjYsLTIwLjcxIC0yMi4zMSwxMS4yMSAtMjQuMTMsLTIzLjE4IDEwLjE0LC0xNTUuNCAtNC43NywtMi4yIC0zMy42NCwxNTcuNjMgLTI5Ljk3LDE0LjIxIC04LjgsLTEuMTcgLTM1LjIxLC0yMC4zOCAtMzQuMTcsMTAuNDEgLTguNjMsLTIuNzkgLTMyLjkzLC0yNi42OCAyNC45NiwtMTUxLjU0IC0xMC42NiwtMi4wOSAtNDUuNjIsMTQwLjM0IC0zMi40OSwxNS4zMyAtNTUuMDgsLTQwLjM2IC0zOC45OSw5LjA3IEwgMTA2LjgyLDYxOC40MyAxNTMuMjYsNDg2LjA2IDguODUsNDI4LjU3IDYzLjkzLDM4MC44NiAwLDMzMy4wNSB6IiBmaWxsPSIjZDIzZTJjIi8+PHBhdGggZD0iTSAzMDIuNzYsMzQuNTggNDY0Ljk4LDE1OC45MyA0MjMuMDcsMzY3LjM3IDI3Ny4yNywyODQuMjIgMTgxLjc5LDMzMi42NiA4MS41NywxNDMuMDggeiIgZmlsbD0iI2E4MzEyMyIvPjxwYXRoIGQ9Im0gMTA3OC45Miw0MC4xMSAxOTYuOSw3Ny44NCAtMTA5Ljk5LDI1My4wNyAtMTAzLjg5LC02MC4wNyAtMTUuMzcsMS45IC0xMTkuMDUsNDkuMjIgLTI1LjQ3LC0yMjcuMzQgeiIgZmlsbD0iI2E4MzEyMyIvPjxwYXRoIGQ9Im0gNjA1LjY1LDMyMi43NCAzLjYsMTA3LjE5IC0xMDAuNzYsMS41NyA2NC41OSwtMzMuMzggeiIgZmlsbD0iI2E4MzEyMyIvPjxwYXRoIGQ9Im0gNzE4LjUxLDMyNS4zIDMzLjMzLDc3LjAyIDc5LjQxLDI4LjI3IC0xMTkuOSwxOS40OSB6IiBmaWxsPSIjYTgzMTIzIi8+PC9zdmc+") no-repeat 100% 100%, none;
}
Run Code Online (Sandbox Code Playgroud)

数据URI似乎不是关键点,但这里是解码的SVG文件:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 1333 750" version="1.1">
    <path d="m 0,0 1333,0 0,320.53 -72.67,48.42 52.45,37.57 -126.31,52.84 50.13,136.19 …
Run Code Online (Sandbox Code Playgroud)

css firefox svg gecko

Tig*_*igt
2015 09-21
13
推荐指数
2
解决办法
1万
查看次数

响应式图像如何与以“sizes”的长度提供的“em”配合使用？

em在响应式图像中使用时，浏览器如何理解该单位？

<img alt="A giraffe" src="giraffe.jpg"
     srcset="giraffe@1.5x.jpg 600w, giraffe@2x.jpg 800w, [etc.]"
     sizes="(max-width: 40em) 40em">
Run Code Online (Sandbox Code Playgroud)

这验证了，我没有在浏览器控制台中看到警告。但是，如果图像预加载器的全部目的是在下载和解析 CSS之前获取图像，那么浏览器有什么用em？

它只是font-size适用于它的默认值<html>吗？rem为了清楚起见，我应该使用吗？用户缩放时两者有区别吗？

这不是理论上的；我用em我的媒体查询断点，以及一些图片被限制由容器大小的最佳线路长度（使用em，当然）。

我检查了规范，但它对新的响应式图像功能非常简洁。

html image em responsive-design srcset

Tig*_*igt
lucky-day
6
推荐指数
1
解决办法
2990
查看次数

当 DOM 元素从网络流入时，如何附加它们？

我有一个元素想要作为请求的 HTML 流填充，而不是等待完整的响应。事实证明这非常困难。

\n\n

我尝试过的事情：

\n\n

1.milestoneNode.insertAdjacentHTML(\'beforebegin\', text)

\n\n

如果这有效的话，那就太好了。不幸的是，具有古怪解析的元素会破坏它 \xe2\x80\x94 例如<p>和<table>。由此产生的 DOM 可以被宽容地描述为 Dada。

\n\n

2.使用虚拟DOM/DOM更新管理库

\n\n

谷歌似乎incremental-dom最有前途，但它的patch()操作总是从容器节点的开头重新启动。不知道如何将其“冻结”到位。

\n\n

这也有至少在 JavaScript 中进行 HTML 标记化的负担，并且必须进行一些实际的树构建，除非提供格式良好的 XHTML5。（没有人这样做。）重新实现浏览器的HTML 解析器似乎是我犯了严重错误的标志。

\n\n

3.document.write()

\n\n

我很绝望。讽刺的是，这个古老的妖怪几乎具有我需要的行为，没有“扔掉现有页面”的事情。

\n\n

4. 附加到字符串，然后innerHTML定期对其进行 ing

\n\n

破坏了流式传输的意义，因为最终整个响应都会保存在内存中。还有重复序列化的开销。

\n\n

从好的方面来看，它确实有效。但肯定有更好的方法吗？

\n

html javascript streaming dom service-worker

Tig*_*igt
2016 07-17
6
推荐指数
1
解决办法
2189
查看次数

SVG 描边和填充之间的空间

用相同的颜色填充并抚摸一个stroke-width超过一定大小的圆，会在两个绘画区域之间产生一个奇怪的透明区域 \xe2\x80\x9c。到底是怎么回事？

\n\n

Chrome 和 Firefox 中都会发生这种情况，因此可能符合规范，但我无法在规范中找到有关此行为的任何语言。

\n\n

小提琴

\n\n
<svg viewBox="0 0 300 300">\n  <circle cx="100" cy="100" r="8" \n    stroke="#000" stroke-width="40" \n    fill="#000"/>\n</svg>\n
Run Code Online (Sandbox Code Playgroud)\n\n

产生这样的渲染：

\n\n

一个黑色的圆圈，里面有一个透明的圆环

\n

svg

Tig*_*igt
lucky-day
6
推荐指数
2
解决办法
2822
查看次数

我可以将<picture>用于高度和宽度受限的图像吗？

我有一个幻灯片放映的东西,图像将尽可能大,但不超过视口的宽度或高度.基本上object-fit: contain.

我想让这些图像反应灵敏,因为对于手机而言,"尽可能大",而大型桌面则非常不同.我不能使用<img srcset>因为它现在只有屏幕密度(x描述符)或宽度(w描述符).因此,<picture>我自己手动制作选择逻辑.

我开始时:

<picture>
  <source media="(orientation:portrait)"
          sizes="(max-width: 1200px) 100vw, 1200px"
          srcset="300.jpg 300w, 500.jpg 500w, 800.jpg 800w, 1200.jpg 1200w">
  <source sizes="(max-width: 1200px) 100vw, 1200px"
          srcset="300.jpg 300w, 500.jpg 500w, 800.jpg 800w, 1200.jpg 1200w">
  <img src="default.jpg" alt="a man slipping on a banana peel">
</picture>
Run Code Online (Sandbox Code Playgroud)

但它并不像屏幕的方向那么简单,因为所涉及的实际宽高比对于视口(非常高的手机,浏览器工具栏等)和图像本身而言都会变得非常奇特; 相同的图像可能在一个屏幕上受到宽度约束,但在另一个屏幕上受到高度约束.我想我可以写解析出的纵横比的脚本,但我难倒逻辑来把它转换成一个有意义srcset和sizes列表.

理想情况下 很快<img srcset>就会获得h描述符,但我想将现在可以解决的问题混在一起.

html image responsive-design srcset

Tig*_*igt
lucky-day
5
推荐指数
1
解决办法
1184
查看次数

将自动扩展“concertina”CSS 网格行行为复制为列

Michelle Barker 写了 \xe2\x80\x9cSolving a Tricky Layout Problem with CSS Grid\xe2\x80\x9d。她的代码在垂直方向上工作得很好，但我\xe2\x80\x99m很难在水平方向上适应它。

\n

随着视口变窄（或者当您添加更多文本或增加等），顶部/底部版本成功地缩放其文本\xe2\x80\x99s 网格行font-size。但是当调整视口、文本或font-size左/右版本\xe2\x80\xa6时，我\xe2\x80\x99m不知道如何描述发生的情况：

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n
视口顶部对齐底部对齐右对齐尝试左对齐尝试
宽的在此输入图像描述在此输入图像描述在此输入图像描述文本位于媒体的左下角，x 轴重叠较多
狭窄的在此输入图像描述窄视口中的底部对齐文本我尝试在狭窄的视口中右对齐文本在此输入图像描述
\n
\n

\r\n
\r\n
* {\n  box-sizing: border-box;\n}\n\n.grid {\n  border: 2px dashed;\n  margin: 40px 0;\n}\n\n.grid__media {\n  background: darkgray;\n  font: 2em monospace;\n  alignment-baseline: middle;\n  text-anchor: middle;\n}\n\n.grid__text {\n  background: rgba(95, 158, 160, 0.7);\n}\n\n:root {\n  --static-areas: repeat(8, minmax(0, 1fr));\n  --autoexpanding-areas: [text-start] 1fr [media-start] auto [text-end] 40px [heading-start] auto [heading-end] 40px auto …
Run Code Online (Sandbox Code Playgroud)

css translation accessibility css-grid

Tig*_*igt
2023 05-21
5
推荐指数
0
解决办法
187
查看次数

在静态文件上分块使用Transfer-Encoding：是一个好主意吗？

我有一个通常的静态站点，服务器在其中捕获.html文件并将其发送。

我了解Transfer-Encoding: chunked动态服务器页面的重要性，因为这是针对动态服务器页面而设计的。加速可能非常令人难以置信。但是，静态文件的速度增加是否相同？当Content-Length文件通过网络到达时，浏览器是否已经逐步使用＆的请求进行渲染和获取？

我有一些非常巨大的HTML（百页范围内的文档），因此渐进式HTML处理至关重要。（有点像WHATWG如何提供整体式单页HTML5规范。）

html http transfer-encoding

Tig*_*igt
lucky-day
3
推荐指数
1
解决办法
530
查看次数

可以使用SVG滤镜对像素进行像素化处理吗？

注意:我不能使用JavaScript,因为这是针对CSS Zen Garden的挑战.请不要建议JS库.

我有2个想法,我没有取得进展:

  1. 使用SVG滤镜只是像素化dang图像; 之后我一直在玩<feMorphology operator="erode"/>和对比,但看起来很糟糕.

  2. 将图像过滤为较小,然后使用CSS image-rendering将其缩放并且全部是块状的.困难的部分是步骤A; 我找不到任何缩放输入的过滤操作.

我错过了什么吗？如何使用SVG滤镜获得"像素化"效果？

css svg svg-filters

Tig*_*igt
lucky-day
1
推荐指数
2
解决办法
1988
查看次数

标签 统计

html ×5

css ×4

svg ×3

image ×2

responsive-design ×2

srcset ×2

accessibility ×1

css-grid ×1

dom ×1

em ×1

firefox ×1

gecko ×1

http ×1

javascript ×1

service-worker ×1

streaming ×1

svg-filters ×1

transfer-encoding ×1

translation ×1