我知道iPhone曾经不支持位置:固定,但是现在它确实存在,当我在具有更高z-index的其他元素后面滚动固定位置元素时,我看到了一个奇怪的故障.具有较低z-index的固定位置元素暂时出现在前面,这看起来非常糟糕.有办法防止这种情况吗?
我尝试添加-webkit-transform: translate3d(0, 0, 0);到固定元素,它似乎没有帮助这个问题.
transform:translateZ(x)除了z-index之外
我添加的更新并没有解决问题.
Update2
我添加了-webkit前缀,这可以解决移动Safari上的z-index问题,但也会导致位置:已修复在桌面Chrome中无法正常工作.
我正在使用以下内容嵌入pdf文件:
<div class="graph-outline">
<object style="width:100%;" data="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf">
<embed src="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf" />
</object>
</div>
Run Code Online (Sandbox Code Playgroud)
它工作,但我想设置pdf宽度以匹配包含div的宽度.目前它显示为带有滚动条的iframe,因此要查看整个pdf,您必须从右向左滚动.我希望pdf适合容器的宽度.
我该如何解决?我支持IE8及以上.
这是一个jsfiddle:http://jsfiddle.net/s_d_p/KTkcj/
我正试图在使用时将Flexbox项目的内容居中justify-content:stretch;.看来旧的使用技巧display:table-cell;vertical-align:middle;在这种情况下不起作用.什么
.flex-container {
display:flex;
align-items:center;
justify-content:stretch;
}
.flex-item {
align-self:stretch;
}
<div class="flex-container">
<div class="flex-item">I want to be vertically centered! But I'm not.</div>
</div>
Run Code Online (Sandbox Code Playgroud)
在你回答之前:对于我的要求似乎有很多困惑.我正试图将flex项目的内容居中.使用时justify-content:stretch,项目的高度将延伸到容器的整个高度,但项目的内容会浮动到顶部(至少在Chrome中).
"一张图片胜过千言万语." (A)是我已经得到的.(B)是我想要的.

我使用svg图像作为背景.我正在尝试使用CSS3,background-size: 100% 100%;但它似乎不起作用,即使在应该支持它的浏览器中(如Chrome).
如果你看这个网站,你会看到#special-post article(在食物图像的右下方)有一个红色的横幅背景.请注意,当您向下缩小窗口时,背景图像的高度会下降以保留其比例,而不是按照我的意愿拉伸.
编辑:我在FireFox上检查了它,它工作正常...所以这似乎是一个webkit问题.
编辑:我在Safari上检查了它,它的工作原理!所以看起来我的问题是针对Chrome的.

(PS:我熟悉这种替代解决方案,使用img标签,但我宁愿不使用它.)
我已经看到了关于如何将块元素居中的一百万个问题,并且似乎有几种流行的方法来实现它,但它们都依赖于固定的像素宽度.那么要么是margin:0 auto绝对/相对定位left:50%; margin-left:[-1/2 width];等等.如果元素的宽度设置为%,我们都知道这不起作用.
真的没有办法以真正流畅的方式做到这一点吗?我正在谈论使用%宽度(不设置固定宽度越来越小的十几个媒体查询).
注意:有很多解决方案使用热门词"响应",但不回答我的问题(因为他们无论如何都使用固定宽度).这是一个例子.
更新: 我差点忘了:你如何处理限制居中元素的最大宽度并仍然保持在中心?在@ smdrager的回答下看到我的评论.现实生活中的例子.我想要一个弹出消息或一个灯箱效果,其中包含一段文本在窗口中居中显示,文本根据宽度流畅地换行.但我不希望文本框在文本难以阅读的地方伸展得太远(想象一个4英尺的屏幕,其中三个段落延伸到一行文本上).如果为大多数方法添加最大宽度,则在达到最大宽度时,居中框将停止居中.
我在布局中使用以下代码来显示两种类型的flash消息:
<% if !flash[:notice].nil? %>
<div class="row">
<div class="flash notice col-xs-12">
<%= flash[:notice] %>
</div>
</div>
<% end %>
<% if !flash[:error].nil? %>
<div class="row">
<div class="flash error col-xs-12">
<%= flash[:error] %>
</div>
</div>
<% end %>
<%= debug(flash[:notice]) %>
<%= debug(flash[:error]) %>
Run Code Online (Sandbox Code Playgroud)
它们都工作正常,但无论何时触发,它仍然会出现一个额外的页面视图.我没有使用任何缓存宝石.
为什么会这样?我该如何解决?
我想知道在Rails 4中实施Google Analytics跟踪代码以及turbo链接的最佳方法是什么.普通代码段是否有效?我也看过这个宝石,但我不确定它是做什么的.
ruby google-analytics ruby-on-rails turbolinks ruby-on-rails-4
我的日期来自数据库,看起来像这样: 2013-11-21 17:43:20
我正在尝试使用Angular的日期过滤器将它们变成更漂亮的东西,但......
{{Objected.created | date:'shortDate'}}
Run Code Online (Sandbox Code Playgroud)
要么
{{Objected.created | date:'YYYY'}}
Run Code Online (Sandbox Code Playgroud)
...只是吐出原始日期时间字符串:2013-11-21 17:43:20.没有错误.我究竟做错了什么?
更新 我发现MySQL的默认日期时间与Angular的数据过滤器所期望的不兼容.我试图像这样在飞行中转换它,但它会抛出错误:
<li ng-repeat="result in data">{{ new Date(result.Job.created).toISOString() | date:'shortDate'}}</li>
Run Code Online (Sandbox Code Playgroud)
我怀疑我不能以我正在尝试的方式实例化Date类.错误是$ parse:语法错误.
更新
感谢@ m59的帮助,我得到了一些小的调整......
HTML:
<html ng-app="myApp">
...
{{Object.created | dateToISO | date:'shortDate'}}
Run Code Online (Sandbox Code Playgroud)
JS:
var myApp = angular.module('myApp',[]);
myApp.filter('dateToISO', function() {
return function(input) {
input = new Date(input).toISOString();
return input;
};
});
Run Code Online (Sandbox Code Playgroud)
这个自定义过滤器将默认的MySQL日期时间转换为日期过滤器期望的格式,所以我发送它然后抛出另一个并且"瞧".
当用户点击页面边缘时,我不希望我的网站内容晃动.我只想让它停下来.
我到处看到的全方位javascript解决方案是这样的:
$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);
Run Code Online (Sandbox Code Playgroud)
但这可以完全阻止滚动.有没有办法去除反弹.最好使用CSS或元标记而不是JS,但任何有效的方法都可以.
正如标题所暗示的,当我尝试link_to在我的邮件模板中使用时,我收到此错误:
ActionView::Template::Error: Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true
Run Code Online (Sandbox Code Playgroud)
我试着遵循它的说明,我也找到了这篇文章,但我仍然得到错误.
我已经尝试添加config.action_mailer.default_url_options = { host: 'example.com' }到以下每个文件,但没有一个工作:
/config/environment.rb
/config/application.rb (inside the module for my app)
/config/development.rb (I'm in development mode)
Run Code Online (Sandbox Code Playgroud)
在Rails 4中有什么变化使得这项工作有所不同吗?