在我构建的网站上滚动时,使用CSS属性position: fixed按预期工作,以在页面顶部保留导航栏.
但是,在Chrome中,如果您使用导航栏中的链接,它有时会消失.通常,您点击的项目仍然可见,但并非总是如此.有时候整个事情都会消失.移动鼠标会带回元素的一部分,只需单击一下滚动滚轮或箭头键即可返回元素.您可以在http://nikeplusphp.org上看到它(间接地)发生- 您可能需要点击一些导航链接几次才能看到它发生.
我也尝试过使用z-index和可见性/显示类型,但没有运气.
我遇到了这个问题,但修复对我来说根本不起作用.似乎是一个webkit问题,因为IE和Firefox工作得很好.
这是一个已知问题还是有修复可以保持固定元素可见？
更新:
只有效果元素top: 0;,我试过bottom: 0;,并按预期工作.
我很想知道是否有像Gecko.NET这样的东西;)我的意思是,就像我们可以嵌入一个WebView,这是任何Windows窗体应用程序中的IE7"实例"(并告诉它navigateto(fancy_url);).我喜欢使用Firefox或WebKit.
有人试过吗？
更新:请记住,虽然可以使用上述控件嵌入Gecko,但使用Gecko时仍然无法打印.
更新2010年3月:仍然无法使用GeckoFX本地打印,但是根据您尝试做的事情,存在一些可能已经足够的方法.有关详细信息,请参阅:http://geckofx.org/viewtopic.php？id = 796.
更新2013年10月:我不再进行Windows开发,所以我对此没有兴趣,但似乎可以在这里找到Gecko的开发:https://bitbucket.org/geckofx,它似乎最近更新了.将此留给未来的Windows开发人员;)
更新2017年1月:我收到了一家名为TeamDev的公司的电子邮件.他们创建了一个名为"DotNetBrowser"的基于Chromium的.NET浏览器组件,可用于在Windows窗体应用程序中显示现代网页.
直接引用电子邮件:
以下是有关该组件的一些详细信息,可能会有所帮助:
免责声明: 我没有使用过这个DotNetBrowser,因为我不再进行Windows开发,但如果您正在寻找解决方案,可能值得一试.
我正在尝试<select>使用CSS 设置元素的下拉箭头,它在Chrome/Safari中完美运行:
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url('./select-arrow1.png') ;
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
margin: 0;
padding-top: 2px;
padding-bottom: 2px;
width: 200px;
}
这看起来很漂亮
根据这个逻辑,我必须做的唯一让它在Firefox中工作的是添加所有-webkit-*东西-moz-*:
-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;
它适用于99%,唯一的问题是默认下拉箭头不会消失,并保持在背景图像的顶部,如此处所示
看起来-moz-appearance: button;对<select>元素不起作用.也-moz-appearance: …
嗨,我正在使用多个平板设备,iPad,Galaxy Tab,Acer Iconia,LG 3D Pad等.
我想仅使用CSS3媒体查询来定位iPad.由于LG和iPad的设备宽度相同768px - 我在分离每个设备时遇到问题.
我试过跟随分离,但似乎没有工作:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */
@media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */
@media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad …Bootstrap模式在Android和iOS上无法正常运行.问题跟踪器确认问题但未提供可行的解决方案:
屏幕变暗但模式本身在视口中不可见.可以在页面顶部找到它.当您向下滚动页面时会发生此问题.
以下是bootstrap-responsive.css的相关部分:
.modal {
position:fixed;
top:50%;
left:50%;
z-index:1050;
max-height:500px;
overflow:auto;
width:560px;
background-color:#fff;
border:1px solid #999;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip:padding-box;
-moz-background-clip:padding-box;
background-clip:padding-box;
margin:-250px 0 0 -280px;
}
我可以申请修复吗？
在jQuery文档说,库有内置支持下列活动:模糊,焦点,负载,调整大小,滚动,卸载,单击,DBLCLICK,鼠标按下,鼠标松开,鼠标移动,鼠标悬停,鼠标移开,了mouseenter,鼠标离开,改变,选择,提交,keydown,按键,键盘和错误.
我需要处理剪切,复制和粘贴事件.怎么做到最好？FWIW,我只需要担心WebKit(幸运的是我!).
更新:我正在类似仪表板的环境中处理"小部件".它使用WebKit,因此它(这是为了我的目的)是否真的很重要,这些事件是否在那里被支持,它看起来就像它们一样.
我的视图控制器显示WKWebView.我安装了一个消息处理程序,一个很酷的Web Kit功能,允许从网页内部通知我的代码:
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
let url = // ...
self.wv.loadRequest(NSURLRequest(URL:url))
self.wv.configuration.userContentController.addScriptMessageHandler(
self, name: "dummy")
}
func userContentController(userContentController: WKUserContentController,
didReceiveScriptMessage message: WKScriptMessage) {
// ...
}
到目前为止一切都很好,但现在我发现我的视图控制器正在泄漏 - 当它应该被释放时,它不是:
deinit {
println("dealloc") // never called
}
看起来只是将自己安装为消息处理程序会导致保留周期,从而导致泄漏!
我是新的伪元素,前缀为双冒号.我遇到了一篇博客文章,讨论使用一些webkit only css来讨论滚动条的样式.伪元素CSS可以应用于单个元素吗？
/* This works by applying style to all scroll bars in window */
::-webkit-scrollbar {
width: 12px;
}
/* This does not apply the scrollbar to anything */
div ::-webkit-scrollbar {
width: 12px;
}
在这个小提琴中,我想自定义div的滚动条,但主窗口的滚动条保持默认状态.
转到http://www.facebook.com/facebook?v=wall,然后单击信息选项卡.内容将被加载,地址栏现在变为http://www.facebook.com/facebook?v=info但网页没有重新加载.
起初我认为它是Ajax,但我的问题是,如何在不重新加载的情况下更改地址栏？我知道我可以使用JS更改锚点(#wall)但是querystring(？v = wall),怎么样？
我发现这篇文章:
http://www.zurb.com/article/221/css3-animation-will-rock-your-world关于css3动画.
我试图在上面的网站上创建一个类似的效果,但在个人网站上:www.imfrom.me
我有缅因州,有红色尖盒.我想通过指示位置的箭头创建一个脉冲环.
更新代码:
我在下面提出了这个问题(在这里试试:http://jsfiddle.net/ftrJn/),因为你可以告诉它,我对如何从中心发展它有任何想法:
.gps_ring {
border: 3px solid #999;
-webkit-border-radius: 30px;
height: 18px;
width: 18px;
position: absolute;
left:20px;
top:214px;
}
.gps_ring{
-webkit-animation-name: pulsate;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite
}
@-webkit-keyframes pulsate {
0% { width:1px;height: 1px; opacity: 0.0}
10% { width:3px;height: 3px; opacity: .20}
20% { width:5px;height: 5px; opacity: .40 }
30% { width:7px;height: 7px; opacity: .60 }
40% { width:9px;height: 9px; opacity: .80 }
50% { width:11px;height: 11px; opacity: 1.0} …