小编eme*_*his的帖子

移动safari位置:滚动时固定的z-index毛刺

我知道iPhone曾经支持位置:固定,但是现在它确实存在,当我在具有更高z-index的其他元素后面滚动固定位置元素时,我看到了一个奇怪的故障.具有较低z-index的固定位置元素暂时出现在前面,这看起来非常糟糕.有办法防止这种情况吗?

我尝试添加-webkit-transform: translate3d(0, 0, 0);到固定元素,它似乎没有帮助这个问题.

这里也是一个jsfiddle.

transform:translateZ(x)除了z-index之外 我添加的更新并没有解决问题.

Update2 我添加了-webkit前缀,这可以解决移动Safari上的z-index问题,但也会导致位置:已修复在桌面Chrome中无法正常工作.

css iphone mobile-safari ios

33
推荐指数
2
解决办法
4万
查看次数

如何嵌入响应宽度的PDF文件

我正在使用以下内容嵌入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/

html css embed pdf object

32
推荐指数
3
解决办法
12万
查看次数

如何垂直居中Flexbox项目的内容

我正试图在使用时将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)是我想要的. 在此输入图像描述

html css vertical-alignment css3 flexbox

28
推荐指数
1
解决办法
2万
查看次数

背景大小:100%100%; 在Chrome中无法正常运行

我使用svg图像作为背景.我正在尝试使用CSS3,background-size: 100% 100%;但它似乎不起作用,即使在应该支持它的浏览器中(如Chrome).

如果你看这个网站,你会看到#special-post article(在食物图像的右下方)有一个红色的横幅背景.请注意,当您向下缩小窗口时,背景图像的高度会下降以保留其比例,而不是按照我的意愿拉伸.

编辑:我在FireFox上检查了它,它工作正常...所以这似乎是一个webkit问题.

编辑:我在Safari上检查了它,它的工作原理!所以看起来我的问题是针对Chrome的.

(PS:我熟悉这种替代解决方案,使用img标签,但我宁愿不使用它.)

css google-chrome background-image css3

26
推荐指数
1
解决办法
1万
查看次数

CSS:在限制最大宽度的同时,以流体div为中心(没有px宽度)的响应方式?

我已经看到了关于如何将块元素居中的一百万个问题,并且似乎有几种流行的方法来实现它,但它们都依赖于固定的像素宽度.那么要么是margin:0 auto绝对/相对定位left:50%; margin-left:[-1/2 width];等等.如果元素的宽度设置为%,我们都知道这不起作用.

真的没有办法以真正流畅的方式做到这一点吗?我正在谈论使用%宽度(设置固定宽度越来越小的十几个媒体查询).

注意:有很多解决方案使用热门词"响应",但回答我的问题(因为他们无论如何都使用固定宽度).这是一个例子.

更新: 我差点忘了:你如何处理限制居中元素的最大宽度并仍然保持在中心?在@ smdrager的回答下看到我的评论.现实生活中的例子.我想要一个弹出消息或一个灯箱效果,其中包含一段文本在窗口中居中显示,文本根据宽度流畅地换行.但我不希望文本框在文本难以阅读的地方伸展得太远(想象一个4英尺的屏幕,其中三个段落延伸到一行文本上).如果为大多数方法添加最大宽度,则在达到最大宽度时,居中框将停止居中.

html css html5 css3 responsive-design

26
推荐指数
3
解决办法
16万
查看次数

Rails 4:下一页视图的Flash消息仍然存在

我在布局中使用以下代码来显示两种类型的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)

它们都工作正常,但无论何时触发,它仍然会出现一个额外的页面视图.我没有使用任何缓存宝石.

为什么会这样?我该如何解决?

ruby ruby-on-rails ruby-on-rails-4

25
推荐指数
1
解决办法
6889
查看次数

使用Google Analytics进行Rails 4 turbolinks

我想知道在Rails 4中实施Google Analytics跟踪代码以及turbo链接的最佳方法是什么.普通代码段是否有效?我也看过这个宝石,但我不确定它是做什么的.

ruby google-analytics ruby-on-rails turbolinks ruby-on-rails-4

25
推荐指数
4
解决办法
8606
查看次数

无法格式化默认的MySQL日期时间

我的日期来自数据库,看起来像这样: 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 mysql datetime angularjs

25
推荐指数
1
解决办法
2万
查看次数

iOS:禁用反弹滚动但允许正常滚动

当用户点击页面边缘时,我不希望我的网站内容晃动.我只想让它停下来.

我到处看到的全方位javascript解决方案是这样的:

$(document).bind(
   'touchmove',
   function(e) {
     e.preventDefault();
   }
);
Run Code Online (Sandbox Code Playgroud)

但这可以完全阻止滚动.有没有办法去除反弹.最好使用CSS或元标记而不是JS,但任何有效的方法都可以.

javascript css iphone mobile-safari ios

23
推荐指数
4
解决办法
6万
查看次数

ActionView :: Template ::错误:缺少要链接的主机

正如标题所暗示的,当我尝试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中有什么变化使得这项工作有所不同吗?

ruby ruby-on-rails ruby-on-rails-4

22
推荐指数
2
解决办法
9938
查看次数