小编Gav*_*vin的帖子
iOS 10 Safari:防止在固定叠加层后面滚动并保持滚动位置
当显示固定位置叠加时,我无法阻止主体内容滚动.类似的问题已被多次询问,但以前工作的所有技术似乎都不适用于iOS 10中的Safari.这似乎是最近的一个问题.
一些说明:
- 如果我都设为我可以禁用滚动
html和body以overflow: hidden,然而,使主体内容滚动到顶部. - 如果覆盖中的内容足够长以便可以滚动,则对主页内容正确禁用滚动.如果叠加层中的内容不足以导致滚动,则可以滚动主页面内容.
- 我在http://blog.christoffer.me/six-things-i-learnt-about-ios-safaris-rubber-band-scrolling/中添加了一个javascript函数,该函数
touchmove在叠加显示时禁用.这在以前工作,但不再有效.
这是完整的HTML源代码:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: arial;
}
#overlay {
display: none;
position: fixed;
z-index: 9999;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: scroll;
color: #fff;
background: rgba(0, 0, 0, 0.5);
}
#overlay span {
position: absolute; …推荐指数
解决办法
查看次数
在换行后删除内联块元素上的边距
我希望有一种方法可以在没有JavaScript的情况下做到这一点.我有两个元素显示内联块.它们的宽度和高度均为200像素,因此它们都出现在同一行,除非浏览器的大小非常小(或使用移动浏览器).我希望两个元素之间有50px的空间,所以在第二个元素上我添加了"margin-left:50px",这很好用.当浏览器的大小调整为两个元素都不能放在同一行上的大小时,第二个元素将换行到下一行,这就是我想要它做的.问题是第二个元素仍然具有50px左边距,因此元素不会出现居中.我可以添加JavaScript来检测容器高度何时发生变化(即元素包裹到下一行)并删除左边距,
这是我的代码,简化:
<!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">
<body>
<div id="wrapper" style="text-align: center;">
<div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div>
<div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div>
</div>
</body>
</html>
推荐指数
解决办法
查看次数
Webkit浏览器显示蓝色文本略带紫色
我在Google上找不到关于此问题的任何信息,因为每个结果都是关于默认的紫色a:visited.这不是问题.问题在于Chrome的默认消除锯齿功能,在某些系统上蓝色文字显示为蓝紫色.如果我将抗锯齿更改为-webkit-font-smoothing: antialiased保持正确的颜色,但Chrome和Firefox之间的字体完全不同.我正在使用的蓝色是客户端的颜色,所以它不能像这样变成紫色.我希望有人能解决这个问题.
以下是我完成的测试的截图:
编辑:只是为了澄清,这与默认a:visited链接颜色无关.我的蓝色是继承的,但Chrome的抗锯齿导致文本显示为紫色.这是一个例子:http://jsfiddle.net/yvjjxfqt/
推荐指数
解决办法
查看次数
使用XMLHttpRequest获取单个文件的上载进度
我正在使用XMLHttpRequest(使用jQuery)来获取多个文件的上传进度.通过向XMLHttpRequest对象添加"progress"事件侦听器,我可以得到event.loaded和event.total.这些变量给出了所有组合文件的加载和总字节数.
我想要做的是获取每个文件的进度,但从我可以看到的信息不能用于XMLHttpRequest.真的吗？
我不认为这甚至是必要的,但这是我的代码:
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener('progress', function(event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
updateProgressBar(percent);
}, false);
}
return xhr;
如果我能用XMLHttpRequest完成这个,那就太好了.任何关于此的信息将不胜感激.
推荐指数
解决办法
查看次数
PhoneGap桌面服务器正在运行,但无法在其他设备或计算机上访问
在我拔头发之前需要一些帮助.我今天刚安装了最新的桌面应用和移动应用.我在OSX上运行PhoneGap桌面应用程序,服务器在端口3000上启动.它工作正常.如果我去,192.168.0.5:3000我会得到"Hello World"应用程序.如果我去,127.0.0.1:3000我会得到"Hello World"应用程序.执行端口扫描表示端口3000已打开.在我的iPhone 6上,使用PhoneGap应用程序尝试连接,但最终会出错.在Safari中我试着去192.168.0.5:3000,它最终说"Safari无法打开页面......"
我有Little Snitch运行,但网络过滤器已关闭.OSX防火墙未运行.我的路由器上的防火墙已关闭.这到底是怎么回事？
推荐指数
解决办法
查看次数
-webkit-font-smoothing属性在Chrome中无效
我正在尝试使用-webkit-font-smoothingCSS属性控制谷歌浏览器(可怕的)字体抗锯齿,但它对文本完全没有影响.
<div style="font-size: 42px">
<p style="-webkit-font-smoothing: subpixel-antialiased">This is a font test.</p>
<p style="-webkit-font-smoothing: antialiased">This is a font test.</p>
<p style="-webkit-font-smoothing: none">This is a font test.</p>
</div>我比较了Photoshop中的像素,三者完全相同.Chrome不再支持此属性了吗？
推荐指数
解决办法
查看次数
想要在激活iOS键盘时调整浏览器视口大小
在iOS网络浏览器(Safari,Chrome等)中,当您单击输入字段并显示键盘时,它会使视口保持相同的大小,但会将其部分滑出视图.这使得创建类似app的网站变得非常困难,因为我正在编写一个聊天应用程序,当键盘显示我希望完全保持对话时,只需调整对话区域的大小以适应新的"已调整大小"的可视区域.
我已经尝试了所有的东西,例如让对话区域绝对定位left: 0; right: 0; top: 0; bottom: 0,但iOS仍然保持视口大小相同并将其推向局部视线之外.
这可能吗？或者是系统级功能是否超出了CSS或JavaScript的控制范围？
推荐指数
解决办法
查看次数
如何在Node/Express中调试EJS模板
我正在将Node模板转换为Node.js/Express中的EJS.模板文件有点复杂,因此调试它们并不容易.Node没有给我任何有用的调试信息,因此它几乎不可能完成这项任务.这是一个示例错误消息.
SyntaxError: Unexpected string in "app/views/profile/index.ejs"
at Object.Function (<anonymous>)
at exports.compile (/Users/Gavin/Web/node_modules/ejs/lib/ejs.js:237:14)
at Object.exports.render (/Users/Gavin/Web/node_modules/ejs/lib/ejs.js:284:10)
at View.exports.renderFile [as engine] (/Users/Gavin/Web/node_modules/ejs/lib/ejs.js:318:20)
at View.render (/Users/Gavin/Web/node_modules/express/lib/view.js:76:8)
at Function.app.render (/Users/Gavin/Web/node_modules/express/lib/application.js:502:10)
at ServerResponse.res.render (/Users/Gavin/Web/node_modules/express/lib/response.js:777:7)
at Object.exports.profile_index [as handle] (/Users/Gavin/Web/app/controllers/routes/profile.js:72:6)
at next_layer (/Users/Gavin/Web/node_modules/express/lib/router/route.js:103:13)
at Object.exports.verify_user [as handle] (/Users/Gavin/Web/app/controllers/routes/account.js:305:10)
找到这种模糊错误消息的来源非常繁琐.有没有更简单的方法来调试EJS文件？
推荐指数
解决办法
查看次数
换行时,内联块元素的宽度扩展到100%
我想在内联块元素上有一个背景颜色,它不会超过最宽的文本点.只要通过添加<br>标记明确文本中的换行符,它就可以正常工作.如果没有<br>标签并且它自己包裹,它将达到100%宽度.
这里是<br>"ipsum"之后的标签.
在这里它是自己包装的:
https://jsfiddle.net/340v3hnj/
如何在不必手动添加<br>标签的情况下将背景设置为文本框的大小？
这是HTML代码:
<div class="wrapper">
<p>Lorem ipsum dolorsit amet</p>
</div>
和CSS:
.wrapper {
border: 1px solid red;
text-align: center;
width: 450px;
}
p {
display: inline-block;
margin: 0;
padding: 10px;
font: 50px arial;
color: white;
background: black;
}
推荐指数
解决办法
查看次数
Node.js 在 response.redirect 后保留 URL 哈希
我已经使用 看到了许多针对此的 JavaScript 修复window.location，但对于 Node.js 没有任何修复。
我正在使用 OAuth 将用户连接到 Facebook。获得授权后，Facebook 会重定向到您的回调 URL 并在其后附加“# = ”。问题出在我的回调路由中，我重定向到另一个 URL，但 URL 片段（哈希）正在被转移。
这是我的 Facebook 回调路线：
exports.facebook_signin_complete = function(req, res)
{
res.redirect('/profile');
};
如果我删除重定向，则 URL 为/auth/facebook/callback#_=_，如果我保留重定向，则 URL 为/profile#_=_。为什么哈希被结转？这是一个页面特定的锚点标记，所以如果这是它应该做的，我会感到非常惊讶。
推荐指数
解决办法
查看次数
如何从 flexbox 中的所有包装行中删除左右边距（没有 nth-child 或 js）
我正在寻找一种好方法，可以在不使用 ::nth-child 或 JavaScript 的情况下从每行中的每个第一个和最后一个项目中删除左右边距。如果这是不可能的，那么我想下一个最好的方法是在主 flexbox 元素上设置负的左/右外边距，但我不太确定使用width: 100%. 基本上我想要的是这个 flexbox 的左侧和右侧没有蓝色。
编辑：我将不得不在这里为我自己的问题提供解决方案。我将使用包装器元素的东西放在一起，overflow: hidden并将 flexbox 设置为width: calc(100% + 5px). 事实证明 Internet Explorerbox-sizing: border-box在 flexbox中不支持，但我在这里找到了一种解决方法。
HTML：
<div id="main">
<div><span>div 1</span></div>
<div><span>div 2</span></div>
<div><span>div 3</span></div>
<div><span>div 4</span></div>
<div><span>div 5</span></div>
<div><span>div 6</span></div>
<div><span>div 7</span></div>
<div><span>div 8</span></div>
<div><span>div 9</span></div>
<div><span>div 10</span></div>
<div><span>div 11</span></div>
</div>
CSS：
<div id="main">
<div><span>div 1</span></div>
<div><span>div 2</span></div>
<div><span>div 3</span></div>
<div><span>div 4</span></div>
<div><span>div 5</span></div>
<div><span>div 6</span></div>
<div><span>div 7</span></div> …推荐指数
解决办法
查看次数
CSS箭头隐藏在jQuery slideUp或slideDown动画期间
我有一个使用CSS在顶部创建箭头的div:
.arrow_box {
position: relative;
display: none;
background: #88b7d5;
border: 4px solid #c2e1f5;
padding: 20px;
margin-top: 100px;
width: 300px;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 30px;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 36px;
margin-left: -36px;
}
为了展示这个div,我正在使用一个简单的$('.arrow_box').slideDown();jQuery动画.问题是,当div是动画时,箭头是隐藏的,然后一旦动画完成,箭头就会突然显示.我想在动画期间看到箭头.
使用:before和:after伪元素显示箭头,所以我想也许jQuery在动画期间使用伪元素,但似乎并非如此.
这是一个显示问题的jsFiddle:http …
推荐指数
解决办法
查看次数
如何在此电子邮件验证正则表达式中添加对 +（加号）的支持？
这是我在网上找到的一个正则表达式，它似乎在简单的电子邮件地址验证方面做得很好。问题是它不允许在电子邮件中使用 +，例如my+email@domain.com. 我不擅长正则表达式，那么如何在不破坏整个事情的情况下添加对 + 的支持呢？
var regex = new RegExp( /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i );
推荐指数
解决办法
查看次数