程序设计 css

7

我们希望能够使用Font Awesome（http://fortawesome.github.com/Font-Awesome/）图标作为CMS中无序列表的项目符号。 CMS上的文本编辑器仅输出原始HTML，因此无法添加其他元素/类。这意味着在标记看起来像这样时显示图标： <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> 我可以看到的第一个问题是Font Awesome是否需要一个不同的font-family属性，而这需要一个单独的元素。使用纯CSS是否可能？还是我必须使用类似jQuery的元素将其附加到每个列表项的开头？我意识到我们可以使用背景图像的后备，但是如果可能的话，最好使用Font Awesome。

131 css font-awesome

14

在iPhone Safari上是否可以对<body>应用“ overflow：hidden”？

是否overflow:hidden可以<body>在iPhone Safari上使用？好像没有我无法在整个网站上创建包装器来实现此目标... 您知道解决方案吗？示例：我的页面很长，只是想隐藏“折叠”下面的内容，它应该可以在iPhone / iPad上使用。

131 iphone css ipad safari overflow

8

向:: after或:: before伪元素内容添加换行符

我无权访问页面的HTML或PHP，只能通过CSS进行编辑。我一直在网站上进行修改，并通过::after或::before伪元素添加文本，并且发现转义Unicode应该用于添加内容之前或之后的空格等内容。如何在content属性中添加多行？在示例中，HTML换行符仅用于可视化我想要实现的目标： #headerAgentInfoDetailsPhone::after { content: 'Office: XXXXX <br /> Mobile: YYYYY '; }

131 css

4

具有内联样式的CSS伪类

Наэтотвопросетьответына 堆栈溢出нарусском：Какпрописать：hoverвнутриstyle =''？是否有可能使用内联样式的伪类？例： <a href="http://www.google.com" style="hover:text-decoration:none;">Google</a> 我知道上述HTML不能正常运行，但是有类似的东西吗？附言：我知道我应该使用外部样式表，但确实如此。我只是好奇是否可以使用内联样式来完成。

131 html css css-selectors pseudo-class inline-styles

10

通过iframe嵌入YouTube视频是否忽略z-index？

我正在尝试实现水平的多级下拉导航菜单。在菜单的下方（垂直），我通过iframe嵌入了YouTube视频。如果我将鼠标悬停在Firefox中的一级导航上，则下拉菜单会正确显示在视频顶部。但是，在Chrome和IE9中，在菜单和iframe之间的一小段空间中，只有一小部分下拉菜单可见。其余的似乎都在 iframe的后面。问题似乎与YouTube视频有关，而不与iframe有关。为了进行测试，我将iframe定位于另一个网站而不是视频，并且即使在IE中，下拉菜单也可以正常工作。问题1：WTF？问题2：为什么，即使我明确地将z-index:-999 !important; iframe 放在iframe上，仍然会出现此问题？ YouTube嵌入代码中是否包含一些内部CSS，以某种方式覆盖了一切？

130 css iframe youtube

7

覆盖并重置CSS样式：自动或不起作用

我想覆盖为所有表定义的以下CSS样式： table { font-size: 12px; width: 100%; min-width: 400px; display:inline-table; } 我有一个名为的类的特定表'other'。最后，餐桌装饰应如下所示： table.other { font-size: 12px; } 所以，我需要除去3个属性：width，min-width和display 我尝试使用none或进行重置auto，但没有帮助，我的意思是这些情况： table.other { width: auto; min-width: auto; display:auto; } table.other { width: none; min-width: none; display:none; }

130 css width overriding

7

我应该在CSS或HTML中将图像作为data / base64嵌入吗

为了减少服务器上的请求数量，我将一些图像（PNG和SVG）作为BASE64直接嵌入到CSS中。（在构建过程中自动执行）像这样： background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...); 这是一个好习惯吗？有什么理由可以避免这种情况？是否有一些不支持数据URL的主流浏览器？额外的问题：对CSS和JS这样做也有意义吗？

130 html css base64

5

为什么我不能保证金居中：0自动？

我有一个#headerdiv，100% width在该div内，我有一个无序列表。我已经申请margin: 0 auto无序列表，但不会在标头div中居中。有人可以告诉我为什么吗？我认为，如果定义父div的宽度，那么无序列表应该可以以居中margin: 0 auto。我想念什么？这是我的代码： <style> * { margin: 0; padding: 0; } #header { width: 100%; background-color: #333; min-height: 160px; font-family:Arial, Helvetica, sans-serif; } #sitename { font-size: 50px; width: 620px; margin:0 auto; padding-top: 35px; color:#999; } #header ul { float: right; margin: 0 auto; } #header …

130 html css margin

5

是否可以选择第n个孩子的最后n个项目？

使用标准列表，我尝试选择最后2个列表项。我有多种排列方式，An+B但似乎没有什么可以选择最后2种： li:nth-child(n+2) {} /* selects from the second onwards */ li:nth-child(n-2) {} /* selects everything */ li:nth-child(-n+2) {} /* selects first two only */ li:nth-child(-n-2) {} /* selects nothing */ 我知道像CSS3这样的新选择器，:nth-last-child()但如果可能的话，我更喜欢一些可以在更多浏览器中使用的选择器（不必特别在意IE）。

130 css css-selectors

9

输入内的填充中断宽度100％

好的，所以我们知道即使对对象设置填充也会导致其宽度发生变化，即使它是明确设置的也是如此。尽管可以争论其背后的逻辑，但这会导致某些元素出现问题。在大多数情况下，您只需添加一个子元素并向其中添加填充，而不是将其设置为100％，但是对于表单输入而言，这是不可能的。看一下这个：http : //sandman.net/test/formcss.html 第二个输入的填充设置为5px，我非常喜欢默认设置。但是不幸的是，这使输入在所有方向上都增加了10px，包括在100％宽度上增加了10px。这里的问题是我无法在输入中添加子元素，因此无法修复它。所以问题是：有什么方法可以在输入中添加填充，同时又保持宽度100％？由于表格将以不同宽度的父级呈现，因此它必须为100％，所以我事先不知道父级的宽度。

130 css input padding

4

为什么CSS中的边距/填充百分比总是按宽度计算？

如果您查看CSS盒模型规范，将会观察到以下内容： [margin]百分比是相对于生成的框的包含块的宽度计算的。请注意，“ margin-top”和“ margin-bottom”也是如此。如果包含块的宽度取决于此元素，则CSS 2.1中未定义结果布局。（强调我的）确实是这样。但是为什么呢？到底什么会迫使任何人以这种方式设计它？很容易想到您想要的方案，例如，某件事总是比页面顶部低25％，但是很难提出您希望垂直填充相对于水平尺寸相对的任何原因。父母。这是我所指现象的一个示例： <div style="border: 1px solid red; margin: 0; padding: 0; width: 200px; height: 800px;"> This div is 200x800. <div style="border: 1px solid blue; margin: 10% 0 0 10%;"> This div has top-margin of 10% and left-margin of 10% with respect to its parent. …

130 w3c css

13

display：inline vs display：block

以下CSS之间的基本区别是什么： display:inline 还有这个： display:block 在元素上单独使用它们，我得到相同的结果。

130 css

14

HTML <sup />标记会影响行高，如何使其一致？

如果我<sup>在多行<p>标记中有一个标记，则不管我在上放什么行高，上面带有上标的行的行距都比其他行大<p>。编辑以澄清问题：我并不是说我有很多<p>，每个都在一行上。我有一个<p>内容足够多的包装，导致包装成多行。文字中的某处（任何地方）可能会有<sup>或<sub>。这会通过在上方/下方添加额外的间距来影响该行的行高。如果我在<p>此设置较大的行高，则对问题没有影响。行高增加了，但是仍然保留了额外的间距。我如何使其一致-即所有行是否包含相同的间距<sup>？您的解决方案必须是跨浏览器（IE 6 +，FF，Safari，Opera，Chrome）

130 html css subscript superscript

7

使用普通链接提交表格

我要提交表格。但我不打算使用输入按钮，提交类型的基本方式，但一个一个链接。下图显示了原因。我正在使用图像链接来保存/提交表单。因为我有用于图像链接的标准CSS标记，所以我不想使用输入提交按钮。我尝试将onClick =“ document.formName.submit（）”应用于a元素，但我更喜欢html方法。有任何想法吗？

130 html css forms hyperlink submit

6

在Less中连接字符串

我认为这是不可能的，但我想我要是有办法的话。我的想法是，我有一个用于Web资源文件夹路径的变量： @root: "../img/"; @file: "test.css"; @url: @root@file; .px { background-image: url(@url); } 我得到这个结果： .px { background-image: url("../img/" "test.css"); } 但是，我希望将这些字符串合并为一个字符串，如下所示： .px { background-image: url("../img/test.css"); } 是否可以在Less中将字符串连接在一起？

129 css path web less concat

Questions tagged «css»