TL; DR:我想在SVG精灵表中使用几个图标作为CSS背景图像,它们保持纵横比并自动缩放以填充父元素,只使用SVG和CSS.请不要使用JavaScript.
所以我有一个SVG格式的spritesheet,我使用SVG-Edit和Notepad ++中的一些手动编码组合.这是源代码:
<svg version="1.1"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="600"
height="400"
viewBox="0 0 600 400">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<title>chosen_sprite</title>
<g>
<title>Add</title>
<rect fill="none" stroke-width="10" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="5" y="5" width="90" height="90" id="svg_1" stroke="#dcdcdc"/>
<line id="svg_2" y2="50" x2="70" y1="50" x1="30" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/>
<line id="svg_3" y2="30" x2="50" y1="70" x1="50" stroke-linecap="round" stroke-linejoin="null" stroke-dasharray="null" stroke-width="12" stroke="#00a00c" fill="none"/>
</g>
<g>
<title>Delete</title>
<rect fill="none" stroke-width="10" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="105" y="5" width="90" height="90" id="svg_1" stroke="#dcdcdc"/>
<line id="svg_2" y2="70" …tl; dr - 当我尝试使用YYYY-MM-DD格式的日期字符串创建一个新的Date对象时,它给了我一个不正确的日期(昨天).为什么？
我编写了以下测试代码来帮助我演示我所感知的问题:
var dateConfig = {weekday: "long", year: "numeric", month: "long", day: "numeric"},
dates = [
"01/21/2014",
"01-21-2014",
"2014/01/21",
"2014-01-21"
];
for (var i = 0; i < dates.length; ++ i) {
var date = new Date(dates[i]);
console.log(date.toLocaleDateString("en-US", dateConfig));
}
链接自己查看:http://s.codepen.io/AdrianTP/fullpage/prKyf
Chrome 31.0.1650.63 m在控制台中返回以下内容:
Tuesday, January 21, 2014
Tuesday, January 21, 2014
Tuesday, January 21, 2014
Monday, January 20, 2014
Firefox 26.0在控制台中返回以下内容:
"Tuesday, January 21, 2014"
"Invalid Date"
"Tuesday, January 21, 2014" …我正在使用需要以下代码的规范:
<dl>
<dt>Key</dt>
<dd>012345678901234567890123456789</dd>
</dl>
......像这样渲染:
Key 01234567890123456
7890123456789
当DD的内容包含空格时,它可以正常工作,但是当没有空格时,它会失败.即使包括dd { word-wrap: break-word; }不太有效,也会产生以下结果:
Key
0123456789012345678901
23456789
我目前的CSS看起来像这样:
dl {
margin: 1em 0;
padding: 0;
width: 250px;
}
dt {
float: left;
clear: left;
margin: 0;
padding: 0 .5em 0 0;
font-weight: bold;
}
dd {
margin: 0;
padding: 0;
word-wrap: break-word;
}
dd:after {
content: ".";
visibility: hidden;
clear: left;
}
如何仅使用HTML和CSS实现预期效果？
我在这里也有一个演示,试图澄清我的需求:http://cdpn.io/Ezujp(警告,包含SCSS而不是CSS,但它并不是非常复杂,所以它应该很容易在心理上翻译) .
我从/sf/answers/110417821/阅读,学习并使用了它,虽然它让我更接近我的预期解决方案,但它并不能满足我的所有需求.
我不需要使用DL.如果有另一种方式以跨浏览器(IE7 +)的方式实现我的预期效果,那么我愿意使用它,只要它在语义上是正确的并且不涉及太多的黑客攻击.
我会尝试,dt { display: …