Firefox中独立于CSS/HTML结构的SVG文本被截断
问题描述:
页面通过验证器,适用于IE9和Chrome。但我无能为力,为什么文本在Firefox中被切断?我尝试过使用CSS,改变标签的宽度和高度(没做任何事情),改变了标签的绝对位置(仍然在相同的位置切断),几乎尝试了任何HTML /明智的CSS。Firefox中独立于CSS/HTML结构的SVG文本被截断
答
给svg元素的宽度和两个集height属性为100%。
答
添加属性“background-size”,并为其指定SVG图像的宽度和高度值,如下所示:background-size:(width)px(height)px;因此,如果您的SVG的宽度为100px,高度为50px,请在CSS中为SVG使用以下规则: background-size:100px 40px;
此外,为了增加对旧的浏览器,定义了一个回退为png背景的CSS的SVG背景之前,你的SVG,以下列方式(并序): 背景:网址(fallback_image.png)不重复; background:url(svg_image.svg)no-repeat;
这是可行的,因为大多数支持SVG的浏览器都支持多种背景,因此后面的背景(SVG)也会被应用。如果浏览器不支持SVG,它将只使用第一个背景(非SVG)。
给予宽度和高度确实有效!谢谢。你也碰巧知道为什么菜单页面不能用doctype工作,但是在firefox和IE浏览器中都不工作? – pbond 2012-04-17 13:42:27
Nvm开始用Rafael JS库替换所有内容以实现跨浏览器兼容性。 – pbond 2012-04-17 16:33:09