小编Van*_*als的帖子
如何使用AngularJS或Javascript提供下载文件？
我在隐藏的textarea中有一些文本.单击按钮时,我希望将文本提供下载为.txt文件.这可能使用AngularJS或Javascript吗？
推荐指数
解决办法
查看次数
用封面或包含大小调整循环背景图像的CSS方式
假设你试图为这样的tilable背景设置动画:
.container {
width: 160px;
height: 91px;
}
.bg {
width: 100%;
height: 100%;
background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
background-size: contain;
-webkit-animation: displace 2s linear infinite;
animation: displace 2s linear infinite;
}
@-webkit-keyframes displace {
from {
background-position: 0 center;
}
to {
background-position: 160px center;
}
}
@keyframes displace {
from {
background-position: 0 center;
}
to {
background-position: 160px center;
}
}<div class="container">
<textarea class="bg"></textarea>
</div>只要更改容器的尺寸,循环动画就会中断!
有没有办法让没有JS的响应？
推荐指数
解决办法
查看次数
如何在手机上使用图像元素来拍摄清晰的图像
图片元素得到了广泛而迅速的传播(http://caniuse.com/#search=picture),我认为这是避免提供超大/小尺寸图片的好方法,特别是当你想在手机上显示相同的图片时和桌面占视口宽度的100%.
这可以这样解决:
<img
srcset="large.jpg 1920w,
medium.jpg 720w,
small.jpg 360w"
src="medium.jpg">
这允许浏览器聪明并决定加载哪个图片,但我发现这种方法存在问题:许多移动设备的像素密度为2或更高!因此,当显示360w时,如果我们希望图像看起来清晰,我们实际上需要中等图像.可以这样做:
<picture>
<source srcset="http://goo.gl/LsuU9t" media="(min-width: 720px)">
<source srcset="http://goo.gl/LsuU9t" media="(min-width: 360px and min-resolution: 2dppx)">
<img src="http://goo.gl/LsuU9t">
</picture>在我看来,这里的问题是,这可能会随着屏幕分辨率的增长而增长,并且我们失去了浏览器巧妙地决定最佳选择的好处.
所以,我的问题是如果两者之间有一个中间点,所以我仍然可以在html和css之间分开.
推荐指数
解决办法
查看次数
Javascript Map对象如何改进我们的编码？
如果我们可以使用javascript对象创建键/值对,那么假设是什么用于ES6新的Map()对象？
我什么时候应该使用另一个？Map是限制为值还是包含函数？
推荐指数
解决办法
查看次数
CSS fit-content和max-content有什么区别？
我正在关注这篇文章https://css-tricks.com/almanac/properties/w/width/,试图了解这个规则的工作原理.
我有这个例子:
*{margin:0; padding:0}
.box{
background: lightgreen;
margin: 0 auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}<div class="box">
<img src="https://tyrannyoftradition.files.wordpress.com/2012/05/cutest-kitten-hat-ever-13727-1238540322-17.jpg" alt="" />
<figure>Yes, put some text here that is wider than the image above to try some new rules</figure>
</div>文章说,fit-content可以用来将未知宽度的div居中 margin: x auto;
但是如果你在这个例子中更改了max-content的fit-content,那么无论如何它都会起作用,并且它们似乎总是以相同的方式运行.
有谁知道这两条规则之间有什么区别,我应该在哪些情况下使用其中一条规则？
推荐指数
解决办法
查看次数
使用javascript检测微软的边缘或斯巴达
是否已知Edge或Spartan浏览器的用户代理？任何人都可以告诉我如何检测这个浏览器并在IE发布之前将其与IE区分开来吗？
推荐指数
解决办法
查看次数
CSS下划线没有移动点击
我试图在点击超链接时创建滑动水平线.请查看:http: //codepen.io/anon/pen/JdEPPb
HTML是:
* {
box-sizing: border-box;
}
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.container {
width: 50%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
text-decoration: none;
color: #333;
}
.one:active ~ hr {
margin-left: 0%;
}
.two:active ~ hr {
margin-left: 25%;
}
.three:active ~ hr {
margin-left: 50%;
}
.four:active ~ hr {
margin-left: 75%;
}
hr { …推荐指数
解决办法
查看次数
是否可以在非响应式网站中加载响应式iframe？
在将此标记为重复之前,请允许我告诉您,这不是关于使iframe重新缩放,我不期望这样的答案:制作iframe响应
我的问题很容易解释:我的网站没有meta视口标记,宽度为(比方说)1000px.因此,当您在移动设备中加载它时,它会重新缩放以适应360px宽度,并且一切都非常小.
现在,我完全知道如何使iframe调整到任何宽度,但这里的问题是正在加载的网站也将显示宽度为1000px,即使这个具有meta视口标记.当然,这个iframe中的所有内容都显示得非常小.
现在的问题是:我是否可以使该iframe的内容以全宽显示,但不服从父文档的宽度,而是服从设备的宽度.(显然我不想要一个小的360px iframe).
这可能有助于您理解: 
编辑:很多人似乎不明白这一点,所以解释它的另一种方法是:
选择任何没有视口标记的网站
在上面涂上固定的框架
并尝试使iframe看起来像是在新标签上打开的(默认情况下,iframe的视口将像1000px一样,我希望它是手机的视口大小)
推荐指数
解决办法
查看次数
overflow:hidden不会剪切绝对定位的内容
我正在尝试制作一个带有滚动文本的框.问题是,当文本位于框的一半时,它会在我希望剪切时显示在它外面.
HTML/CSS非常简单,我不知道可能出现的问题:
#vbox {
width: 100px;
height: 500px;
overflow: hidden;
background: #afa;
}
#vtext {
position: absolute;
width: 100px;
top: 250px;
}<div id="vbox">
<div id="vtext">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim …推荐指数
解决办法
查看次数
防止元素受外部css影响的完美方法
我正在做一个将在多个页面中实现的脚本,并且我试图阻止它生成的元素被页面css设置为样式.有些人有写这样的CSS的好主意:
body>*{min-height:200px;}
所以我找到了这个新的css属性:
.elem{ all: initial }
它似乎工作得很好,但我已经遇到了一些问题,我打赌可能有很多我不知道的问题.例如,对于Internet Explorer(甚至ie11 !!!)重置min-height,你不能使用initial,你必须使用0!因此,all:initial不会覆盖最小高度......
你知道更好的方法吗或至少我应该单独处理的属性列表？
编辑:更好地解释我想要的.我将在JS(我之前提到它是一个脚本)中做到这一点,我不仅对解决方案感兴趣.我想知道为什么这个解决方案有效,为什么比我提供的更好.另外,我知道性能,所以我更愿意使用最小量的规则,如果可行:我想知道,例如,哪些是最危险的.
推荐指数
解决办法
查看次数
标签 统计
css ×7
html ×4
javascript ×4
css3 ×3
angularjs ×1
browser ×1
ecmascript-6 ×1
iframe ×1
image ×1
inheritance ×1
overflow ×1
user-agent ×1
width ×1