程序设计 css

25

如何从网络应用程序中嵌入的iframe中删除边框？iframe的一个示例是： <iframe src="myURL" width="300" height="300">Browser not compatible.</iframe> 假设背景颜色一致，我希望从页面上的内容到iframe的内容的过渡是无缝的。目标浏览器仅是IE6，不幸的是，其他浏览器的解决方案将无济于事。

706 html css iframe internet-explorer-6 noborder

20

我可以在输入字段上使用：before或：after伪元素吗？

我正在尝试:after在input字段上使用CSS伪元素，但是它不起作用。如果我将其与一起使用span，则可以正常运行。 <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> 这有效（在“ buu！”之后和“更多”之前放入笑脸） <span class="mystyle">buuu!</span>a some more 这是行不通的-它只将someValue涂成红色，但没有笑脸。 <input class="mystyle" type="text" value="someValue"> 我究竟做错了什么？我应该使用另一个伪选择器吗？注意：我无法在span周围添加input，因为它是由第三方控件生成的。

685 html css pseudo-element css-content

15

管理CSS爆炸

我一直非常依赖CSS来开发我正在工作的网站。现在，所有CSS样式都在每个标记的基础上应用，因此现在我正尝试将其移至更多外部样式中，以帮助将来进行任何更改。但是现在的问题是，我注意到我遇到了“ CSS爆炸”。对我来说，决定如何最好地组织和抽象CSS文件中的数据变得越来越困难。我正在div从大量基于表格的网站中使用网站中的大量标签。因此，我得到了许多如下所示的CSS选择器： div.title { background-color: blue; color: white; text-align: center; } div.footer { /* Styles Here */ } div.body { /* Styles Here */ } /* And many more */ 还算不错，但是作为我的初学者，我想知道是否可以就如何最好地组织CSS文件的各个部分提出建议。我不想为网站上的每个元素都拥有单独的CSS属性，而且我一直希望CSS文件相当直观且易于阅读。我的最终目标是简化CSS文件的使用，并展示它们增强Web开发速度的功能。这样，将来可能在该站点上工作的其他个人也将进入使用良好编码实践的实践中，而不必像我以前那样去实践。

682 css organization

12

如何右对齐弹性项目？

是否有比使用方法更灵活的“联系人”右对齐方式position: absolute？ .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="c"><a href="#">Contact</a></div> </div> <h2>Without title</h2> …

678 html css flexbox

25

如何居中“位置：绝对”元素

我在将属性position设置为的元素居中时遇到问题absolute。有谁知道为什么图像没有居中？ body { text-align: center; } #slideshowWrapper { margin-top: 50px; text-align: center; } ul#slideshow { list-style: none; position: relative; margin: auto; } ul#slideshow li { position: absolute; } ul#slideshow li img { border: 1px solid #ccc; padding: 4px; height: 450px; } <body> <div id="slideshowWrapper"> <ul id="slideshow"> <li><img src="img/dummy1.JPG" alt="Dummy 1" …

676 html css css-position centering

5

在CSS Flexbox中，为什么没有“ justify-items”和“ justify-self”属性？

考虑伸缩容器的主轴和横轴：资料来源：W3C 要沿主轴对齐弹性项目，有一个属性： justify-content 要沿十字轴对齐弹性项目，需要三个属性： align-content align-items align-self 在上图中，主轴是水平的，而横轴是垂直的。这些是flex容器的默认方向。但是，这些方向可以轻松地与flex-direction酒店互换。 /* main axis is horizontal, cross axis is vertical */ flex-direction: row; flex-direction: row-reverse; /* main axis is vertical, cross axis is horizontal */ flex-direction: column; flex-direction: column-reverse; （交叉轴始终垂直于主轴。）在描述轴的工作方式时，我的观点是，任一方向似乎都没有什么特别之处。主轴，横轴在重要性上都相同，并且flex-direction可以轻松地来回切换。那么，为什么十字轴具有两个附加的对齐属性？为什么将align-content其align-items合并为主轴的一个属性？为什么主轴没有justify-self属性？这些属性将有用的方案：将flex项目放在flex容器的角落 #box3 { align-self: flex-end; justify-self: …

674 css flexbox language-lawyer w3c

12

Flexbox：水平和垂直居中

如何使用flexbox在容器内水平和垂直居中div。在下面的示例中，我希望每个数字彼此相邻（按行），它们水平居中。 .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; } <div class="flex-container"> <div class="row"> <span class="flex-item">1</span> …

670 html css flexbox

4

CSS中的通配符*用于类

我正在使用这些div进行样式设置.tocolor，但是我还需要唯一的标识符1,2,3,4等。因此，我将其添加为另一个类tocolor-1。 <div class="tocolor tocolor-1"> tocolor 1 </div> <div class="tocolor tocolor-2"> tocolor 2 </div> <div class="tocolor tocolor-3"> tocolor 3 </div> <div class="tocolor tocolor-4"> tocolor 4 </div> .tocolor{ background: red; } 有没有办法只上一堂课tocolor-*。我尝试*在此CSS中使用通配符，但没有用。 .tocolor-*{ background: red; }

668 css css-selectors wildcard

30

为什么不使用表格在HTML中进行布局？[关闭]

按照目前的情况，这个问题不适合我们的问答形式。我们希望答案会得到事实，参考或专业知识的支持，但是这个问题可能会引起辩论，争论，民意调查或扩展讨论。如果您认为此问题可以解决并且可以重新提出，请访问帮助中心以获取指导。 8年前关闭。已锁定。该问题及其答案被锁定，因为该问题是题外话，但具有历史意义。它目前不接受新的答案或互动。人们普遍认为，不应在HTML中使用表格进行布局。为什么？我从来没有（或者说实话很少）对此有很好的论据。通常的答案是：将内容与布局分开是很好的，但这是一个谬误的论点。陈词滥调思维。我想这是真的，使用表格元素进行布局与表格数据无关。所以呢？我的老板在乎吗？我的用户在乎吗？也许是我或我的同伴开发人员，他们需要维护网页……表的维护性较差吗？我认为使用表格比使用div和CSS 更容易。顺便说一句...为什么使用div或span不能很好地将内容与布局和表格分开？仅使用div获得良好的布局通常需要大量嵌套的div。代码的可读性我认为是相反的。大多数人了解HTML，很少人了解CSS。 SEO最好不要使用表，为什么呢？有人可以证明它是吗？还是Google声明从SEO角度不鼓励使用表？表比较慢。必须插入一个额外的tbody元素。这是用于现代Web浏览器的花生。向我展示一些基准测试，在这些基准测试中使用表会大大降低页面速度。没有桌子，布局检修会更容易，请参见css Zen Garden。大多数需要升级的网站也需要新内容（HTML）。新版本的网站仅需要新的CSS文件的情况不太可能发生。Zen Garden是一个不错的网站，但是有点理论化。更不用说它对CSS的滥用。我真的对使用divs + CSS而不是表的良好参数感兴趣。

665 html css

16

拉伸和缩放CSS背景

有没有办法让CSS背景延伸或缩放以填充其容器？

653 html css

10

我可以编写CSS选择器来选择没有特定类或属性的元素吗？

我想编写一个CSS选择器规则，以选择没有特定类的所有元素。例如，给定以下HTML： <html class="printable"> <body class="printable"> <h1 class="printable">Example</h1> <nav>  </nav> <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a> <p class="printable"> This page is super interresting and you should print it! </p> </body> </html> 我想编写一个选择器来选择所有不具有“可打印”类的元素，在这种情况下，这些元素是导航和一个元素。这可能吗？注意：在实际的HTML中，我想使用它的地方将比不包含“可打印的”类的元素多得多（在上面的示例中，我发现这是另一种方式）。

643 html css css-selectors

23

固定位置，但相对于容器

我正在尝试使用以下方法修复一个问题div，使其始终停留在屏幕顶部： position: fixed; top: 0px; right: 0px; 但是，那 div位于内部居中容器中。当我使用position:fixed它时，它div相对于浏览器窗口进行了修复，例如它靠在浏览器的右侧。相反，它应该相对于容器固定。我知道 position:absolute可以用来相对于修复元素div，但是当您向下滚动页面时，该元素消失并且不会像那样粘在顶部position:fixed。是否有破解或解决方法来实现这一目标？

639 css position css-position fixed

26

在HTML / CSS中将图像转换为灰度

有没有一种简单的方法可以显示灰度的彩色位图HTML/CSS？它不需要与IE兼容（我想也不会）-如果它可以在FF3和/或Sf3中工作，对我来说已经足够了。我知道我可以同时使用SVGCanvas和Canvas，但是目前看来这需要大量工作。有没有真正懒惰的人做到这一点？

619 image css grayscale

11

仅使用CSS定位Firefox

使用条件注释，可以使用特定于浏览器的CSS规则轻松定位Internet Explorer：  有时，行为不当的是Gecko引擎（Firefox）。什么是将CSS规则仅定位到Firefox而不是其他浏览器的最佳方式？也就是说，Internet Explorer不仅应该忽略仅Firefox的规则，而且WebKit和Opera也应该忽略它们。注意：我正在寻找一种“干净”的解决方案。在我看来，使用JavaScript浏览器嗅探器向HTML添加“ firefox”类并不符合要求。我希望看到一些依赖于浏览器功能的内容，就像条件注释只是IE的“特殊”……

616 css firefox css-hack

8

删除多个类（jQuery）

有没有更好的办法重写： $('element').removeClass('class1').removeClass('class2'); 我无法使用，removeClass();因为它会删除所有我不想要的类。

615 jquery css

Questions tagged «css»