小编Jit*_*yas的帖子
如何仅从屏幕阅读器隐藏任何元素,而不是从普通用户的页面隐藏？
如何仅从屏幕阅读器隐藏任何元素,而不是从普通用户的页面隐藏？
我知道这些片段,但我想隐藏屏幕重做的东西,但不是从视觉上的页面隐藏.Sscreen阅读器应该跳过隐藏的部分.
/* Hide for both screenreaders and browsers
css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders
www.webaim.org/techniques/css/invisiblecontent/ ; & j.mp/visuallyhidden ; */
.visuallyhidden { position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px); }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
8
推荐指数
推荐指数
2
解决办法
解决办法
2417
查看次数
查看次数
为什么这个SVG图形缩放在IE9和10(预览版)中没有？
根据IE网站 SVG支持.根据这个答案,什么是SVG(可缩放矢量图形)支持的浏览器？
http://jsfiddle.net/jitendravyas/2UWNe/show/
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" viewBox="0 0 480 360"
xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="button_surface" gradientUnits="objectBoundingBox"
x1="1" x2="1" y1="0" y2="1">
<stop stop-color="#434343" offset="0"/>
<stop stop-color="#000000" offset="0.67"/>
</linearGradient>
<linearGradient id="virtual_light" gradientUnits="objectBoundingBox"
x1="0" x2="0" y1="0" y2="1">
<stop stop-color="#EEEEEE" offset="0" stop-opacity="1"/>
<stop stop-color="#EEEEEE" offset="0.4" stop-opacity="0"/>
</linearGradient>
</defs>
<!-- button content -->
<rect x="10" y="10" rx="15" ry="15" width="150" height="80"
fill="url(#button_surface)" stroke="#363636"/>
<text x="30" y="55" fill="white"
font-family="Tahoma" font-size="20" font-weight="500">
SVG Button
</text>
<!-- vitual lighting effect -->
<rect …8
推荐指数
推荐指数
2
解决办法
解决办法
3万
查看次数
查看次数
如何将多个css渐变添加为多个背景？
我想制作一个这样的按钮而不使用渐变图像作为多个背景.可能吗？
使用单个元素
<span class="customStyleSelectBox">Dummy Text</span>
在这里尝试jsfiddle http://jsfiddle.net/Awf6s/2/
8
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
我们可以使用<body>代替#container div吗？
我们可以给宽度和边框用来<body>代替Container div吗？看这个例子
看到这个文件的源代码和文件代码也完全是W3C有效的.在IE 7和Firefox 3.5中看起来一样.
<!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" lang="en" xml:lang="en" dir="ltr">
<head>
<title> Width in body</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
html { background-color: #00f; }
body{background: #cd5c5c;width:800px;height:400px;border:1px solid;color: #fff;margin:0 auto;}
</style>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
7
推荐指数
推荐指数
1
解决办法
解决办法
2230
查看次数
查看次数
任何人都可以很好地解释"em"是什么(CSS的大小单位)？
任何人都可以很好地解释什么EM是CSS的大小单位？
当我们将em用作网站的大小单位时,为什么要使用%作为正文？为什么不为身体使用em？
7
推荐指数
推荐指数
2
解决办法
解决办法
767
查看次数
查看次数
我是否应该在<img>的替代文字中重复人名,如果名字已经在图片中的来源中？
如果我已经在图像下/图像上有人名,那么我应该在ALT文本中使用相同的名字吗？
alt text http://easycaptures.com/fs/uploaded/227/6990285751.jpg
<p><img width="125" height="157" alt="George Washington"
src="media/gw.jpg"><span>George Washington</span><p>
<p><span>George Washington</span>
<img width="125" height="157" alt="George Washington" src="media/gw.jpg"><p>
如果我重复<span>在alt两个条件？图像没有链接.
7
推荐指数
推荐指数
2
解决办法
解决办法
525
查看次数
查看次数
如何在没有ipad的情况下测试ipad的网站,条件是肖像和风景？
如何在没有iPAD的情况下测试iPAD的网站兼容性,条件是纵向还是横向？
在Windows PC上
7
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
在HTML,CSS和浏览器方面,术语"正常流量"和"流出量"是什么意思？
在HTML,CSS和浏览器方面,术语"正常流量"和"流出量"是什么意思？
7
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
搜索引擎和/或屏幕阅读器是否重视HTML5中的新标签？
搜索引擎和/或屏幕阅读器是否重视HTML5中的新标签？
有时我认为我会在JavaScript的帮助下使用HTML5,但是如果搜索引擎和/或屏幕阅读器无法理解新标签会有什么好处呢？
<header>并且<div class="header">是同样的事情,如果<header>有SEO和屏幕阅读器没有任何好处.
7
推荐指数
推荐指数
1
解决办法
解决办法
144
查看次数
查看次数
如何在HTML 5中使用CSS中的2级滚动选项卡
我需要制作这样的标签,它有水平滚动,我使用的是HTML 5 figure和figure标题
HTML示例
<div class="footernav">
<a href="javascript:void(0)">
<figure> <img src="http://lorempixel.com/200/200/fashion/" class="fluid">
<figcaption>
<h3>Product Name</h3>
</figcaption>
</figure>
</a>
</div>
CSS
.footernav {white-space;no-wrap; padding-top: 0.2%; border-top: 1px solid white; overflow: auto; white-space:nowrap; padding-bottom: 1.9%;}
.footernav a { text-decoration: none; font-weight: bold; display: inline-block; padding-right: 1.5%; padding-left: 1.5%; text-align: center; margin-top: 1.1em; overflow:hidden; }
.footernav figure:last-child { margin-right: 0; }
.footernav img { min-width: 118px; max-width: 118px; padding:3px; }
figure{margin:0}
.footernav a:hover,
.footernav a.selected { border-top-left-radius: 15px;
border-top-right-radius: 15px; …7
推荐指数
推荐指数
1
解决办法
解决办法
1467
查看次数
查看次数