标签: webkit
什么是WebKit以及它与CSS有什么关系？
最近,我一直看到标签"webkit"的问题.这些问题通常倾向于与CSS,jQuery,布局,交叉浏览器兼容性问题等相关的基于Web的问题......
那么这个"webkit"是什么？它与CSS有什么关系？我还注意到-webkit-...各种网站的源代码中有很多属性.这两个有关吗？
更新
所以从目前为止的答案...... WebKit是Safari/Chrome的HTML/CSS Web浏览器渲染引擎.IE/Opera/Firefox是否有这样的引擎？使用其中一个的优点和缺点是什么？我可以在Firefox中使用WebKit功能吗？
最终的问题...... IE支持WebKit吗？
更新2
所有主流浏览器都使用不同的渲染引擎.我想这就是为什么有这么多跨浏览器兼容性问题的一个重要原因!
那么,是否有某种项目或移动到所有浏览器将使用的标准渲染引擎？HTML5会结束跨浏览器兼容性问题吗？
推荐指数
解决办法
查看次数
JavaScript:有没有办法让Chrome破解所有错误？
我正在寻找Chrome中与Firebug"破解所有错误"功能相当的功能.在"脚本"选项卡中,Chrome有一个"暂停所有异常",但这与打破所有错误并不完全相同.
例如,在使用以下代码加载页面时,我希望Chrome能够突破foo.bar = 42.相反,即使启用"暂停所有异常",我也无法获得预期的结果.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
function doError() {
foo.bar = 42;
}
window.onload = function() {
try {
doError();
} catch (e) {
console.log("Error", e);
}
}
</script>
</head>
<body>
</body>
</html>
推荐指数
解决办法
查看次数
如何强制WebKit重绘/重绘以传播样式更改？
我有一些简单的JavaScript来实现样式更改:
sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;
这适用于最新版本的FF,Opera和IE,但在最新版本的Chrome和Safari上失败.
它会影响两个后代,这些后代恰好是兄弟姐妹.第一个兄弟更新,但第二个没有.第二个元素的子元素也具有焦点,并包含<a>标记,该标记在onclick属性中包含上述代码.
在Chrome"开发人员工具"窗口中,如果我轻推(例如取消选中并检查)任何元素的任何属性,则第二个兄弟会更新为正确的样式.
是否有一种解决方法可以轻松地以编程方式"轻推"WebKit做正确的事情？
推荐指数
解决办法
查看次数
背景颜色未显示在打印预览中
我正在尝试打印一个页面.在那个页面中,我给了一张表背景颜色.当我在chrome中查看打印预览时,它没有采用背景颜色属性...
所以我尝试了这个属性:
-webkit-print-color-adjust: exact;
但仍然没有显示颜色.
.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> …推荐指数
解决办法
查看次数
Chrome/Safari不会填充100%高度的flex父级
我想要一个具有特定高度的垂直菜单.
每个孩子必须填写父母的高度并且具有中间对齐的文本.
孩子的数量是随机的,所以我必须使用动态值.
Div .container包含一个随机数的children(.item),它们总是必须填充父级的高度.为了实现这一点,我使用了flexbox.
为了使文本链接与中间对齐,我正在使用display: table-cell技术.但使用桌面显示需要使用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> …推荐指数
解决办法
查看次数
在输入类型="数字"上禁用webkit的旋转按钮？
我有一个主要面向移动用户的网站,但桌面也是如此.
在Mobile Safari上,使用<input type="number">效果很好,因为它会在输入字段上显示数字键盘,这些键盘应该只包含数字.
但是在Chrome和Safari中,使用数字输入会在字段的右侧显示旋转按钮,这在我的设计中看起来像垃圾.我真的不需要按钮,因为当你需要写一个像6位数字的东西时它们是无用的.
是否有可能禁用此功能-webkit-appearance或其他一些CSS技巧？我试过没有太多运气.
推荐指数
解决办法
查看次数
使用JavaScript检测浏览器中Android手机的旋转
我知道在iPhone上的Safari中,你可以通过听取onorientationchange事件和查询window.orientation角度来检测屏幕的方向和方向的变化.
这可能在Android手机上的浏览器中出现吗？
为了清楚起见,我问的是,在标准网页上运行的JavaScript是否可以检测到Android设备的旋转.这可能在iPhone上,我想知道是否可以为Android手机完成.
推荐指数
解决办法
查看次数
加载css3过渡动画？
是否可以在不使用Javascript的情况下在页面加载时使用CSS3过渡动画？
这是我想要的,但在页面加载:
http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html
到目前为止我发现了什么
- CSS3 transition-delay,一种延迟元素影响的方法.仅适用于悬停.
- CSS3关键帧,在加载时工作,但速度极慢.因此没用.
- CSS3过渡速度足够快,但不会在页面加载时设置动画.
推荐指数
解决办法
查看次数
jQuery获取元素相对于窗口的位置
给定HTML DOM ID,如何在JavaScript/JQuery中获取元素相对于窗口的位置？这与相对于文档和偏移父项不同,因为该元素可能位于iframe或其他元素内.我需要获取元素矩形的屏幕位置(如位置和尺寸),因为它当前正在显示.如果元素当前处于屏幕外(已滚动关闭),则可以接受负值.
这适用于iPad(WebKit/WebView)应用程序.每当用户点击一个特殊链接时UIWebView,我应该打开一个弹出视图,显示有关该链接的更多信息.弹出视图需要显示一个箭头,该箭头指向调用它的屏幕部分.
推荐指数
解决办法
查看次数
防止在WebKit/Blink中为MacOS触控板用户隐藏滚动条
自10.7(Mac OS X Lion)以来MacOS上的WebKit/Blink(Safari/Chrome)默认行为是在不使用触控板用户时隐藏滚动条.这可能令人困惑 ; 滚动条通常是元素可滚动的唯一视觉提示.
示例(jsfiddle)
HTML<div class="frame">
Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!
</div>
.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}?
如何强制滚动条始终显示在WebKit中的可滚动元素上？
推荐指数
解决办法
查看次数