小编Jor*_*ens的帖子

考虑以下小提琴

p {
  -webkit-transform: translate(-100%, 0);
     -moz-transform: translate(-100%, 0);
      -ms-transform: translate(-100%, 0);
       -o-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  -webkit-transition: transform 1s ease-in;
     -moz-transition: transform 1s ease-in;
       -o-transition: transform 1s ease-in;
          transition: transform 1s ease-in;
}

a:hover + p {
  -webkit-transform: translate(0, 0);
     -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}

转换在FF中顺利进行,但在Safari或Chrome(在我的Mac上)根本没有转换.

转换属性是否加上前缀或我的代码中是否存在某种语法错误？

我正在尝试创建使用条带支付的非常简单的示例.这是我的PHP文件

// Create a Stripe client
var stripe = Stripe('pk_test_XSHE4IYLLy9qCPe7lW7pK4ZE');

// Create an instance of Elements
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
  color: '#32325d',
  lineHeight: '24px',
  fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
  fontSmoothing: 'antialiased',
  fontSize: '16px',
  '::placeholder': {
    color: '#aab7c4'
  }
},
invalid: {
  color: '#fa755a',
  iconColor: '#fa755a'
}
}; …

问题

我正在开发一个使用HTTP协议服务的网站.在开发中,我使用Webpack和它的webpack-dev-server,它在本地服务于页面http://localhost:9090.

我很惊讶在Firefox 58控制台中看到以下关于加载字体文件的混合内容错误.这对我来说很奇怪,因为页面是使用HTTP而不是HTTPS提供的,我认为混合内容错误仅限于HTTPS页面.

`Blocked loading mixed active content “http://localhost:9090/b1aa06d82e70bbd5a14259a94c9bbb40.ttf”

我发现错误的来源是嵌入在<iframe>页面上的YouTube视频(<iframe src="https://www.youtube.com/embed/...>).我删除YouTube嵌入后,错误就会从控制台中消失.

我不明白这种行为,因为它不是嵌套的HTTPS iframe正在发出这种字体请求,而是外部HTTP页面(顶级浏览上下文)!

摘要

外部页面(顶级浏览上下文)使用HTTP提供.只有使用HTTPS获取嵌入式iframe.外部页面生成的字体文件的HTTP请求(不是嵌入式iframe)在Firefox 58控制台中产生混合内容错误.

代码示例

为了给出一个工作示例,我在Plunker上创建了2个笔,它通过HTTP和导入提供(Plunker站点本身,而不是我的代码)WOFF字体字体Awesome over HTTP.

带有错误的示例(通过 HTTPS嵌入了YouTube iframe)会在Firefox 58控制台中产生以下错误:Blocked loading mixed active content “http://plnkr.co/css/font/Font-Awesome-More.woff”.

示例无错误,即删除iframe的代码相同,不会产生错误.

• 有错误
• 没有错误

问题

• 如何在使用HTTP协议加载的网站上添加混合内容？我认为混合内容只能存在于使用HTTPS加载的网站上.是否需要通过HTTPS提供任何资源(例如,通过YouTube嵌入来完成)会产生HTTP混合内容所需的所有内容？
• 我该如何修复错误？我不打算通过HTTPS提供网站服务,我希望我的字体能够在生产HTTP服务器上正确加载.

我有以下HTML代码:

<div class="container">
  <div class="row row1">
      <div class="col col1 col-md-3">
          Column 1
      </div>
      <div class="col col2 col-md-3">
          Column 2 
      </div>
      <div class="col col3 col-md-3">
          <div class="row">
              Column 3
          </div>
          <div class="row">
              Column 4
          </div>
      </div>
  </div>

我正在使用bootstrap网格布局系统,我想实现这样的事情:

这个想法是col1和col2应该与col3和col4的高度相同.

有没有一种方法可以在不指定容器的高度和设置子元素高度100%的情况下这样做,就像我在这个例子中所做的那样？

Jsfiddle演示

我想知道是否有办法通过使用 GitLab 提供的 API 来获取项目中使用的语言（每种语言的百分比）。我检查了他们的文档，但我没有看到任何相关信息，或者我可能错过了。

我知道他们使用语言学家库，但我正在开发一个不是 Ruby 的应用程序，我正在寻找一种方法来整合这些百分比。

我正在使用jQuery 1.12.我通过采用常规的SELECT菜单创建了一个风格化的选择mneu(使用UL和LI),应用了以下样式

.select-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #737373;
  overflow: scroll;
}

.select-options li {
  margin: 0;
  padding: 12px 0;
  text-indent: 15px;
  border-top: 1px solid #676767;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}

.select-options li.selected {
  color: gray;
  background: #fff;
}

.select-options li[rel="hide"] {
  display: none;
}


ul.select-options {
  max-height: 15em;
  overflow-y: scroll;
  overflow-x: hidden;
}

并使用JS

function styleSelectMenu(selectMenu)
{
    var $this = …

如果我同时使用 background-origin: content-box; 和背景大小：封面；在带有一些填充的元素上。背景图像仍然覆盖底部填充（在最新版本的 Safari、Chrome、Firefox 和 IE 中）

div {
  background-image: url('http://lorempixel.com/400/200/');
  background-origin: content-box;
  background-repeat: no-repeat;
  background-size: cover;
  border: 5px red solid;
  padding: 20px;
}

jsfiddle在这里

这是正确的行为吗？如果是这样，为什么（我在这里遗漏了一些明显的东西）？