Tag: css

为什么在OSX中的select选项上使用`-webkit-appearance：none`会使文本消失？

为了在OS X中的Chrome上获得我想要的样式，我必须使用-webkit-appearance: none; 属性。 看到这个问题和这个答案 。 问题是，现在当我选择答案时，它没有出现。 该领域仍然是空白。 这是没有该属性的外观： 这是它与属性的外观： 对于它的价值，这就是我如何创建这个选择菜单 – 使用简单forms： 这是它生成的HTML： United States 我该如何解决？ 编辑1 这是CSS ： form.simple_form select { padding: 20px; -webkit-appearance: none; }

ActionView :: Template :: Error（变量@fontAwesomeEotPath_iefix未定义）

尝试加载任何页面时出错： ActionView::Template::Error (variable @fontAwesomeEotPath_iefix is undefined) (in /app/assets/stylesheets/bootstrap_and_overrides.css.less)): 2: 3: 4: Program 5: “all” %> 6: 7: 8: app/views/layouts/application.html.erb:5:in `_app_views_layouts_application_html_erb__242882506_70513990′ app/controllers/problems_controller.rb:7:in `index’ 我以前做过什么？ 只需运行bundle update

嵌入式字体渲染然后消失

我有一个网站加载一些typekit字体和嵌入式图标字体。 它们似乎都适合所有浏览器。 但是，如果浏览器窗口在一段时间内处于非活动状态，它们将消失，系统字体将在其位置呈现。 重新调整浏览器大小似乎可以解决问题并重新出现嵌入字体。 这个问题很难重新创建，因为它似乎不会一直发生，但它确实会在很多时候发生。 到目前为止，我只看到它发生在Chrome中。 其他细节：该网站托管在Heroku，Rails 4，Turbolinks关闭。 字体嵌入图标字体： @font-face { font-family: ‘icomoon’; src:url(‘../fonts/icomoon.eot’); src:url(‘../fonts/icomoon.eot?#iefix’) format(’embedded-opentype’), url(‘../fonts/icomoon.woff’) format(‘woff’), url(‘../fonts/icomoon.ttf’) format(‘truetype’), url(‘../fonts/icomoon.svg#icomoon’) format(‘svg’); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; } Typekit标头 try{Typekit.load();}catch(e){} 有任何想法吗？

使文本输入字段及其标签正确排列

这是一个相当标准的Rails表单的摘录： 默认情况下，这样呈现如下： alt text http://img412.imageshack.us/img412/127/picture6u.png 这看起来不太好，因为文本字段不对齐。 使表单更像这样的最简单方法是什么： 替代文字http://img193.imageshack.us/img193/746/picture7shk.png 我已经尝试在上设置width样式属性，但此属性似乎没有做任何事情。

rake assets：precompile throws Sass :: SyntaxError：“* /”之后的CSS无效

我希望这不是一个重复的问题; 我在SO上尝试了其他解决方案，没有任何效果 当我的应用程序推送到Heroku时，推送失败，因为application.css无法编译。 我的终端输出： Running: rake assets:precompile rake aborted! Sass::SyntaxError: Invalid CSS after ” */”: expected selector, was “@font-face” (in /tmp/build_17e92975-ae8d-446f-8678-110eeeccfb64/app/assets/stylesheets/adminsite/application.css) (sass):1845 尝试解决方案 我搜索并删除了../stylesheets/adminsite/目录中@ font-face之前的每个“* /”实例。 同样的问题和结果。 我试过设置： config.assets.compile = true ……同样的问题 编辑 这是我的application.css（不是应用程序级别1，而是adminsite目录中失败的那个） /* * This is a manifest file that’ll be compiled into application.css, which will include all the files * listed below. […]

Rails Bootstrap如何格式化form_for（宽度网格折叠）

我正在尝试用bootstrap-sass创建一个表单。 我需要找到引导类的最佳配置，使其看起来不错。 它没有以我期望的方式显示，特别是当浏览器宽度小于特定大小时，标签和表单字段之间的空格会崩溃，并且它看起来不再好看。 如果它只发生在小宽度上就可以了，但事实并非如此。 我真的很感激这方面的一些帮助，真的，用bootstrap格式化form-horizontal的最佳方法是什么？ 这是我的代码： true, class: “col-md-4 control-label” %> “yes” %> false, class: “col-md-4 control-label” %> “no” %> 从注释掉的代码中可以看出，我首先使用了form-group类，但它运行不正常。 同样，问题是当浏览器的宽度小于特定大小时，标签和文本字段之间的空格会崩溃。 右对齐的标签会失去对齐。 浏览器必须几乎全屏才能正确显示，这是不对的，因为它有足够的空间可以在较小的宽度上正确显示。 我正在关注本指南http://getbootstrap.com/css/#grid 编辑 ：在代码中添加了电子邮件字段，因为它的大小不同，更容易看到问题。

RefineryCMS：将引导样式应用于导航菜单

我已将Refinery CMS升级到最新版本（2.1.0），其中有一种渲染导航菜单的新方法： （在部分_header.html.erb ） 相同部分的旧版本： “/refinery/menu”, :locals => { :dom_id => ‘menu’, :css => ‘menu’ }) %> 如何使用MenuPresenter将导航样式添加到导航栏？

使用SASS进行用户主题切换 – Ruby on Rails

所以我有一个rails管理系统，允许用户选择一个主题，基本上是一组SASS颜色变量，它们将使用新颜色重新编译application.css.scss。 当用户从下拉列表中选择并提交时，如何才能更改此更改？ 我读了一些关于缓存和重新编译的问题，但我不完全清楚如何设置它。 目前我有.. application.css.scss @import “themes/whatever_theme”; @import “common”; @import “reset”; @import “base”; 主题/ _whatever_theme $theme_sprite_path: ‘/images/sprite_theme_name.png’; $main_color:#009DDD; $secondary_color:#b3d929; $light_background:#f2f2f2; $border_line:#e6e6e6; $off_white:#f9f9f9; $white:#ffffff; $font_body:#565b59; $font_headers:#363a36; 假设我有5个不同的主题，用户将在它们之间切换，为Rails中的每个主题设置变量名称然后将它们传递给SASS并在运行中更改它们并重新编译将会很不错。 这是最好的解决方法吗？

为rails中的所有活动链接添加“活动”类？

基本上，我有很多代码看起来像这样： link_to t(‘.profile’), business_path(@business), class: ‘#{‘active’ if current_page? business_path(@business)}’ 这不是很干。 我想知道是否有人知道修改link_to帮助程序本身的好方法，以自动将“活动”类添加到当前页面的所有链接。 如果有帮助，我愿意使用HAML或SLIM。

Sass：根据样式表限制处理IE 4095选择器

注意：此问题涉及使用Sass＆Compass的Rails项目。 使用Rails资产管道？ 然后看看这个问题 。 我们正在开发一个包含许多用例和许多单独样式页面的大型应用程序，部分用于多个上下文。 这仅仅意味着很多风格信息。 使用我们应用程序的最新部分，我们已经破坏了Internet Explorer每个样式表4095个选择器的限制。 （想要certificate这个限制吗？ http：//marc.baffl.co.uk/browser_bugs/css-selector-limit/ ） 好的。 那么，为什么我们不能简单地将应用程序样式表分成多个设计呢？ 好吧，mixins和selectorinheritance不能用于多个Sass文件（不是部分），对吧？ 我会说样式表的质量相当不错，我们无法优化掉选择器的数量。 （还有更多的事情要发生。）我还认为，尽量减少选择器的数量不应该是我们的主要优化目标。 Sass核心团队建议在适用的情况下使用选择器inheritance而不是mixins来保存CSS文件大小。 通过这样做，选择器的数量趋于增长。 所以我该怎么做？ 我正在考虑编写一个生成额外css文件的脚本，对我的大application.css文件进行分区。 这些只会在IE中加载（因此我在现代浏览器中没有多个请求）。 我需要一个简单的css解析器，以便在max之后剪切application.css文件。 4095个选择器位于有效位置。 我需要一个指南针编译 – 挂钩后，开发人员不需要手动生成IE文件，以便测试它。 请告诉我，你有更好的主意！ 最好的，基督徒