问题标签 [css-hack]

上下文：我正在尝试使用收音机 hack来切换在 div 中查看的文本.tabinfo，但是我的收音机和display我想要更改其属性的文本位于不同的 div 中。

问题：是否可以使用纯 CSS 选择器#text通过单击嵌套单选来选择元素？

参考代码：我正在使用引导布局并创建了以下 HTML 代码：

以及以下 CSS：

正如您可能已经猜到的那样，上述方法不起作用，因为#texts 和#tabs 位于不同的 div 中。在不破坏 Bootstrap 布局的情况下，是否有任何解决方法或解决方案？

提前致谢。

我在 Google 网站管理员“被黑：内容注入”中收到消息，我在视图源中找到了内容，但我不知道应该从哪个文件中删除它。我可以看到所有页面中的内容（2-3 行）。

我创建了一些效果很好的自定义复选框：

https://codepen.io/anon/pen/jwxXar

我尝试对单选按钮做同样的事情。但是，如果一个单选按钮处于活动状态并且我单击另一个单选按钮，则取消选中将不起作用：

➤ https://codepen.io/anon/pen/YQLdxd

自定义单选按钮 CSS 代码

自定义单选按钮 HTMLCode

CSS 超级英雄中是否有人知道，为什么单选按钮不起作用？

我单独在 Chrome 59 版本中遇到问题。排序我需要一个css hack来单独定位那个 chrome 版本。我看到一篇带有此示例代码的文章说它可以工作，但在我的情况下它不起作用。

示例 1

示例 2

这两个例子都不起作用。

给定以下用于创建响应式正方形网格的 CSS 声明：

overflow: hidden显示子元素时不被尊重。子元素似乎扩展了父元素的高度，并将其父元素下方的元素推到了原位。

我很确定这是使用我用来实现灵活正方形的 padding-bottom/percentage hack 的结果，因为在使用固定高度时一切都按预期工作。

有解决方法吗？我应该使用其他技术吗？

小提琴

当我在自身顶部放置一个缩小的图像并将 CSSimage-rendering参数设置为pixelated：

图像不是像预期的那样出现像素化，而是平滑（并且比原始图像更清晰）。通常pixelated应用时，图像看起来很粗糙（见下文）。

您可以通过删除容器中的第一个图像并比较结果来测试这一点。或删除第二个以查看默认渲染。

然而，有一个警告。虽然它可能对照片很有用，但在使用艺术品时，某些边缘会出现锯齿状。一种解决方法是介于两者之间并在叠加的图像上应用 0.4 左右的不透明度，至少提供一些清晰度。

对这种行为有什么解释吗？它不适用于 IE 或我尝试过的任何其他浏览器。

更新：我在以下 32 位和 64 位版本的 Chrome 中对此进行了测试，结果如下：

60.0.3112.113（64 位）- 有效

60.0.3112.101（64 位）- 有效

59.0.3071.86（64 位）- 有效

58.0.3029.96（64 位）- 不需要使用 hack，因为image-rendering: pixelated已经显示没有像素化的锐化图像

58.0.3029.96（32 位） - 不需要使用 hack，因为image-rendering: pixelated已经显示没有像素化的锐化图像

57.0.2987.133（64 位）- 不需要使用 hack，因为image-rendering: pixelated已经显示没有像素化的锐化图像

56.0.2924.87（64 位）- 不起作用

55.0.2883.75（64 位）- 不起作用

53.0.2785.116（32 位）- 不起作用

48.0.2564.109（64 位）- 不起作用

当涉及到 CSS 时，我们遇到了针对 Firefox Quantum 的问题。我们知道以下内容：

...将针对所有 Firefox 浏览器，但我们只想针对 Firefox Quantum，因为在 CSS 解释方面，Firefox Quantum 和旧版本的 Firefox 之间存在一些差异。有谁知道这是怎么做到的吗？

评论的反斜杠黑客实际上是如何工作的？我有一个模糊的想法，由于反斜杠（出于某种原因），Mac 忽略了以下规则。

这就是我在这里读到的：http: //www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html

\#isMacIE5 { display: none; }如果 Mac 无论如何都看不到它，为什么我们仍然包含？

首先，让我解释一下我所知道的存在并尝试了以下变化：

• 典型的宽高比 hack，它根据宽度管理元素的高度。
• Stackoverflow 回答，其中高度由图像确定，然后决定容器的宽度。

我感兴趣的是纯 CSS 解决方案，具有您能想到的任何 hacky、新奇、实验性的属性，可以实现以下结果：

卡片的高度基于内容（在本例中为标题和段落）。我们称之为h. 卡片中的另一个元素应该是相同h的高度（基于兄弟的内容），无论这个h数量是多少，它也应该是该元素的宽度（创建一个正方形）。

编辑（2019-28-02）：我很抱歉不清楚下一点，但是为了让文本换行，文本所在的区域应该有一个最大宽度。不可否认， Marc Bellêtre 的解决方案在今天非常接近。

这个问题与没有收到任何回复的旧问题非常相似。不同之处在于，在这种情况下，父级没有收到任何明确的高度值。父卡片的高度完全由里面的文字决定。我可以想象，如果这个问题没有收到任何回应/解决方案，这可能没有什么不同，特别是因为这稍微困难一些。但是，从那时起，新技术出现了（即：flexbox/grid），这可能会有所帮助。

请不要使用 JavaScript 解决方案。我非常清楚如何使用它来实现这一目标。

编辑（2021-28-10）：您会认为 2 年后 CSS 中的一个属性称为aspect-ratio我们现在已经有了解决方案。但事实并非如此。请参阅提供的片段。

有时当我加载这段代码时，盒子甚至不是方形的。最大的问题是它根本不尊重height: 100%，但是在调整浏览器或内容的大小之后它将是方形的。更新比率会使盒子意外地变大。

上面的代码没有像我预期的那样工作。