我想有一个垂直的菜单与特定的高度。

每个子元素必须填充父元素的高度，并且文本必须居中对齐。

子节点的数量是随机的，所以我必须使用动态值。

Div .container包含随机数量的子元素(.item)，这些子元素总是要填充父元素的高度。为了实现这一点，我使用了flexbox。

为了使链接与文本对齐到中间，我使用显示:表格单元格技术。但是使用表格显示需要使用100%的高度。

我的问题是。item-inner {height: 100%}不工作在webkit (Chrome)。

有解决这个问题的方法吗? 或者有不同的技术，使所有的。item填充父的高度与文本垂直对齐到中间?

这里的例子jsFiddle，应该在Firefox和Chrome中查看

.container { height: 20em; display: flex; flex-direction: column; border: 5px solid black } .item { flex: 1; border-bottom: 1px solid white; } .item-inner { height: 100%; width: 100%; display: table; } a { background: orange; display: table-cell; vertical-align: middle; } <div class="container"> <div class="item"> <div class="item-inner"> <a>Button</a> </div> </div> <div class="item"> <div class="item-inner"> <a>Button</a> </div> </div> <div class="item"> <div class="item-inner"> <a>Button</a> </div> </div> </div>

我正在试着打印一页。在该页中，我给一个表设置了背景色。 当我在chrome浏览器中查看打印预览时，它没有采用背景色属性…

所以我尝试了这个性质:

-webkit-print-color-adjust: exact; 

但它仍然没有显示颜色。

http://jsfiddle.net/TbrtD/

.vendorListHeading {
  background-color: #1a4567;
  color: white;
  -webkit-print-color-adjust: exact; 
}


<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
  <table class="table" style="margin-bottom: 0px;">
    <thead>
      <tr class="vendorListHeading" style="">
        <th>Date</th>
        <th>PO Number</th>
        <th>Term</th>
        <th>Tax</th>
        <th>Quote Number</th>
        <th>Status</th>
        <th>Account Mgr</th>
        <th>Shipping Method</th>
        <th>Shipping Account</th>
        <th style="width: 184px;">QA</th>
        <th id="referenceSO">Reference</th>
        <th id="referenceSO" style="width: 146px;">End-User Name</th>
        <th id="referenceSO" style="width: 118px;">End-User's PO</th>
        <th id="referenceSO" style="width: 148px;">Tracking Number</th>
      </tr>
    </thead>
    <tbody>
      <tr class="">
        <td>22</td>
        <td>20130000</td>
        <td>Jim B.</td>
        <td>22</td>
        <td>510 xxx yyyy</td>
        <td>zznn@abc.co</td>
        <td>PDF</td>
        <td>12/23/2012</td>
        <td>Approved</td>
        <td>PDF</td>
        <td id="referenceSO">12/23/2012</td>
        <td id="referenceSO">Approved</td>
      </tr>
    </tbody>
  </table>
</div>

我在做一个和拉斐尔有关的项目。事实证明，它在Android上不起作用。iPhone上是这样的。

我该怎么调试Android浏览器上的东西呢?它是WebKit，所以如果我知道版本，在完整版本的WebKit上调试它会产生相同的结果吗?

我一直在尝试重新实现一个HTML5图像上传器，就像Mozilla Hacks网站上的那个，但它适用于WebKit浏览器。该任务的一部分是从canvas对象中提取图像文件，并将其附加到FormData对象中以便上传。

问题是，虽然canvas有toDataURL函数来返回图像文件的表示，但FormData对象只接受file API中的file或Blob对象。

Mozilla解决方案在画布上使用了以下仅限firefox的功能:

var file = canvas.mozGetAsFile("foo.png");

.．.这在WebKit浏览器上是不可用的。我能想到的最佳解决方案是找到某种方法将Data URI转换为File对象，我认为这可能是File API的一部分，但我无法找到这样做的方法。

这可能吗?如果没有，有什么替代方案吗?

最近，我看到一些带有“webkit”标签的问题。这类问题通常是基于web的问题，与CSS、jQuery、布局、跨浏览器兼容性问题等有关…

那么什么是“webkit”，它与CSS有什么关系呢?我还注意到很多-webkit-…属性在各种网站的源代码。这两者有关系吗?

更新

从目前的答案来看…WebKit是一个HTML/CSS浏览器渲染引擎Safari/Chrome。IE/Opera/Firefox有这样的引擎吗?使用其中一种引擎的优缺点有什么不同?我可以在Firefox中使用WebKit功能吗?

终极问题……IE支持WebKit吗?

更新2

所有主流浏览器都使用不同的呈现引擎。我想这就是为什么有这么多跨浏览器兼容性问题的一个重要原因!

那么，是否存在某种项目或移动到所有浏览器都将使用的标准渲染引擎?HTML5会解决跨浏览器兼容性问题吗?

我想用CSS自定义一个滚动条。

我使用这个WebKit CSS代码，它适用于Safari和Chrome:

::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}

::-webkit-scrollbar-track-piece {
  background-color: #c2d2e4;
}

::-webkit-scrollbar-thumb:vertical {
  height: 30px;
  background-color: #0a4c95;
}

我如何在Firefox中做同样的事情?

我知道我可以很容易地用jQuery来做，但我更喜欢用纯CSS来做，如果它是可行的。

我有一个沼泽标准的登录表单-一个电子邮件文本字段，一个密码字段和一个提交按钮的AIR项目，使用HTML/jQuery。当我在表单上按Enter键时，整个表单的内容消失了，但表单没有提交。有人知道这是Webkit的问题吗(Adobe AIR使用Webkit进行HTML)，还是我把事情搞砸了?

我试着:

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
  }
});

但是这既没有停止清除行为，也没有提交表单。没有与表单相关的操作——这可能是问题所在吗?我可以把一个javascript函数的行动?

我刚刚注意到，在Chrome的最新版本(金丝雀版)中，我得到了大量的弃用警告。

事件。layerX和事件。layerY在WebKit中被破坏和弃用。它们将在不久的将来从发动机中移除。

看起来jQuery把事情搞砸了。

我使用的是:jquery-1.6.1.min.js。

升级到最新的jQuery版本是否会有帮助，或者它还没有修复，或者它是Chrome的bug或其他东西。

PS

我不能向您展示代码，因为我认为这是一个普遍的错误，但我怀疑警告会抛出当我试图访问一个jQuery对象或当jQuery试图访问layerX / layerY(好吧，我很确定这是考虑到错误:P的情况)。

jQuery可能会将这些属性复制到jQuery对象中。

所以…

这是怎么呢

EDIT

jQuery 1.7已经发布并修复了这个问题。

在他们的博客上阅读更多。

我在我的javascript中做一个console.log语句，以记录一个javascript对象。我想知道是否有一种方法，一旦完成-复制该对象作为javascript代码。我要做的是转换使用ajax创建的对象，将xml提要解析为静态javascript对象，以便文件可以在本地运行，而不需要服务器。我在chrome检查器窗口中包含了对象的截图，这样你就可以看到我正在尝试做什么。

我似乎无法找到具有多个属性的CSS转换简写的正确语法。这没有做任何事情:

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

我用javascript添加了show类。元素变得更高和可见，它只是没有转换。在最新的Chrome, FF和Safari测试。

我做错了什么?

编辑:只是为了明确，我正在寻找速记版本，以缩小我的CSS。它包含了所有供应商前缀，已经足够臃肿了。还扩展了示例代码。