Questions tagged «css»

我正在使用Rails 3.1.rc5构建我的第一个单独的Rails应用程序。我的问题是我想让我的网站有条件地呈现各种CSS文件。我正在使用Blueprint CSS，并且试图在screen.css大多数情况下渲染链轮/轨道，print.css仅在打印ie.css时以及从Internet Explorer访问该网站时。 不幸的是，清单中的默认*= require_tree命令application.css包括assets/stylesheets目录中的所有内容，并导致令人不愉快的CSS混乱。我当前的解决方法是一种蛮力方法，其中我分别指定了所有内容： 在application.css中： *= require_self *= require home.css ... *= require blueprint/screen.css 在我的样式表中，部分（haml）： <!--[if lt IE 9] <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> ![endif]--> = stylesheet_link_tag "application" = stylesheet_link_tag 'blueprint/print', media: 'print' <!--[if lt IE8]] = stylesheet_link_tag 'blueprint/ie' ![endif]--> = javascript_include_tag "application" 这有效，但不是特别漂亮。我已经花了几个小时进行搜索，才能达到目标，但是我希望有一种更简单的方法，而我只是错过了。如果我什至可以选择性地呈现某些目录（不包括子目录），那么整个过程将变得不那么严格。 谢谢！

166 css  ruby-on-rails-3.1  asset-pipeline  sprockets 

我想开始使用罗盘和无礼的话来加快开发速度。此刻，我已经在Mac上安装了Sass，并指示它监视scss文件作为输入，以及css文件作为生成的输出。 在许多文章中，Sass与Compass一起使用，我想知道为什么会这样，而Compass补充说Sass没有提供什么呢？如果可以举一个例子，那就更好了。 谢谢

166 css  sass  compass-sass 

是否可以background-image为SVG <path>元素设置a ？ 例如，如果我设置了element class="wall"，则CSS样式.wall {fill: red;}有效，但.wall{background-image: url(wall.jpg)}都不起作用.wall {background-color: red;}。

166 html  css  image  svg  background-image 

我有一个（XHTML Strict）页面，在该页面上我将图像与常规文本段落一起浮动。一切顺利，除非使用列表而不是段落。列表的项目符号与浮动图像重叠。 更改列表或列表项的边距无济于事。页边距是从页面的左侧计算得出的，但浮动框将列表项推到其自身内部的右侧li。因此，仅当我将其设置得比图像宽时，边距才有用。 浮动图像旁边的列表也可以，但是我不知道列表何时浮动。我不想为了解决此问题而浮动内容中的每个列表。此外，当图像浮动到列表的右侧而不是列表的左侧时，向左浮动会弄乱布局。 设置li { list-style-position: inside }的确会使项目符号与内容一起移动，但是也会导致换行开始时与项目符号对齐，而不是与上方的行对齐。 问题显然是由子弹在盒子外面渲染引起的，浮子将盒子的内容推到右边（不是盒子本身）。IE和FF就是这样处理情况的，据我所知，按照规范，这没有错。问题是，如何预防呢？

166 html  css 

我的HTML有一个称为的类.required，该类分配给必填字段。 这是HTML： <form action="/accounts/register/" method="post" role="form" class="form-horizontal"> <input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' /> <div class="form-group required"> <label class="col-md-2 control-label">Username</label> <div class="col-md-4"> <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" /> </div> </div> <div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div> <div class="form-group required"><label class="col-md-2 …

166 css  forms  twitter-bootstrap-3  form-fields 

我的CSS： #content_right_head span { display:inline-block; width:180px; overflow:hidden !important; } 现在显示内容 但是我想展示像内容一样的 内容... 我需要在内容后面显示点。内容是动态地来自数据库。

166 html  css 

我正在处理嵌套的flexbox布局，该布局应如下所示： 最外层（ul#main）是一个水平列表，当有更多项目添加到它时，它必须向右扩展。如果它太大，应该有一个水平滚动条。 #main { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; /* ...and more... */ } 该列表（ul#main > li）的每个项目都有一个标题（ul#main > li > h2）和一个内部列表（ul#main > li > ul.tasks）。此内部列表是垂直的，应在需要时包装成列。当包装成更多列时，其宽度应增加以容纳更多物品。此宽度增加也应适用于外部列表的包含项。 .tasks { flex-direction: column; flex-wrap: wrap; /* ...and more... */ } 我的问题是，当窗口的高度变得太小时，内部列表不会自动换行。我尝试了很多改动所有flex属性的方法，尝试严格遵循CSS-Tricks的准则，但是没有运气。 这个JSFiddle显示了我到目前为止所拥有的。 预期结果 （我想要的）： 实际结果 （我得到的）： 较旧的结果 （我在2015年得到的结果）： 更新 经过一番调查，这似乎是一个更大的问题。所有主要的浏览器的行为都相同，与嵌套的Flexbox设计无关。项目包装时，甚至更简单的flexbox列布局也拒绝增加列表的宽度。 这其他的jsfiddle清楚地表明了问题。在当前版本的Chrome，Firefox和IE11中，所有项目均正确包装；列表的高度在row模式下增加，但其宽度在column模式下不增加。另外，更改column模式高度时，根本没有元素的立即重排，但是处于row模式中。 …

166 html  css  flexbox 

通过设置，我找到了一种使div容器至少占据整个页面高度的方法min-height: 100%;。但是，当我添加一个嵌套div和set时height: 100%;，它不会扩展到容器的高度。有办法解决吗？ html, body { height: 100%; margin: 0; } #containment { min-height: 100%; background: pink; } #containment-shadow-left { height: 100%; background: aqua; } <div id="containment"> <div id="containment-shadow-left"> Hello World! </div> </div> 运行代码段隐藏结果展开摘要

166 css  html 

有没有一种方法可以将html渲染为类似PNG的图像？我知道画布是可能的，但我想呈现例如div之类的标准html元素。

166 javascript  html  css  image  render 

我目前正在使用HTML5和jQuery开发适用于iPad Safari的网络应用程序。我遇到了一个问题，其中较大的滚动区域会导致向下滚动时在延迟后出现屏幕外的元素。 我的意思是，如果我有一排不在屏幕上的图像（甚至是带有渐变的div），则当我向下（或向上）滚动到该图像时，预期的行为是该元素在屏幕上显示为我正在滚动到它。 但是，我看到的是，直到我将手指从屏幕上移开并且滚动器完成了所有动画后，该元素才出现。 这给我造成了一个非常明显的问题，尽管看起来并非如此，但整个事情看起来却很不稳定。我猜想iPad Safari正在尝试做一些事情来节省内存。有什么方法可以防止这种不连贯现象的发生。此外，如果有人能阐明iPad Safari的实际用途，我也将不胜感激。

165 css  ios  ipad  html  mobile-safari 

如何控制中的body元素的背景图像和颜色iframe？请注意，嵌入的body元素具有一个类，并且iframe是属于我的网站的页面的。 我需要这样做的原因是我的网站将黑色背景分配给正文，然后将白色背景分配给包含文本的div。所见即所得（WYSIWYG）编辑器iframe在编辑时使用来嵌入内容，但它不包含div，因此文本很难阅读。 iframe编辑器中的when 主体具有一个在其他任何地方都没有使用过的类，因此我假设将其放在那里，这样可以解决此类问题。但是，当我将样式应用于class.body它们时，不会覆盖应用于主体的样式。奇怪的是样式确实出现在Firebug中，所以我不知道发生了什么！ 谢谢 更新-我尝试了@mikeq的解决方案，该解决方案为该类的类添加样式。当添加到主页的样式表时，此方法不起作用，但与Firebug一起添加时，此方法起作用。我假设这是因为Firebug应用于页面上的所有元素，而CSS没有应用于iframe。这是否意味着在使用JavaScript窗口加载后添加css可行？

165 css  iframe  styles  overriding 

在各种浏览器中使最小高度为100％的元素的最佳方法是什么？ 特别是如果您的布局中带有header和footer的固定值height， 如何使中间内容部分填充到底部固定的中间100%空间footer？

164 html  css  xhtml 

我想要替代标准复选框-基本上，我想使用图像，并且当用户单击图像时，将其淡出并覆盖一个复选框。 本质上，当您单击符合特定条件的图像时，我想做类似Recaptcha 2的操作。您可以在此处看到Recaptcha演示，但是有时可能会带您解决文本问题，而不是选择图片。所以这是屏幕截图： 当您单击其中一张图像（在本例中，包含一张牛排的图像）时，单击的图像尺寸会缩小，并出现蓝色对勾，表示已对它进行了对勾。 假设我想重现这个确切的例子。 我意识到我可以有9个隐藏的复选框，并附加一些jQuery，以便当我单击图像时，它可以选择/取消选择隐藏的复选框。但是，缩小图像/覆盖刻度线又如何呢？

164 javascript  jquery  css  html 

可以改变外观<input type="file">吗？

164 html  css  file-upload  input 

我有以下要素： <div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" > <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title"></h3> </div> <div class="modal-body"></div> <div class="modal-footer"></div> </div> </div> </div> 它显示了模态对话框，基本上是这样，它在整个滚动条上放置滚动条modal-dialog，而不modal-body包含我要显示的内容。 图像看起来像这样： 如何modal-body仅获得滚动条？ 我曾尝试分配给style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"，modal-body但没有成功。

164 css  twitter-bootstrap