html – foreignObject display：block在chrome中不起作用_html-js-css

概述这是我的部分html / svg代码 <foreignObject requiredExtensions="http://www.w3.org/1999/xhtml" style="display: none;" id="foo" height="700" width="370" y="0" x="0"> <span xmlns="http://www.w3.org/1999/xhtml" 这是我的部分HTML / svg代码

<foreignObject requiredExtensions="http://www.w3.org/1999/xhtml"  ID="foo" height="700" wIDth="370" y="0" x="0">    <span xmlns="http://www.w3.org/1999/xhtml" >       <div><b>Comments</b></div>    </span></foreignObject>

我想要做的是显示foreignObject onmouSEOver.这是更改foreignObject的style属性的onmouSEOver代码.

$('#foo').CSS('display','block');

这是类工具提示的CSS代码：

.tooltip {    display: block;    position: absolute;    wIDth: 350px;    padding: 5px;    Font-size: 11px;    text-align: left;    color: rgb(0,0);    background: rgb(204,204,204);    border: 2px solID rgb(153,153,153);    border-radius: 5px;    text-shadow: rgba(0,0.1) 1px 1px 1px;    Box-shadow: rgba(0,0.1) 1px 1px 2px 0px;     margin-top: 1px;    top: 0%;     left: 0%;     z-index: 1000;     word-wrap: break-word;}

整个代码在firefox中完美运行,但似乎无法在Chrome中运行.我正在使用Ubuntu 12.04 Chrome版本20.0.1132.57. mouSEOver更改了foreignObjectfrom display的显示：none;显示：块;按预期但文本没有出现.

编辑

http://jsfiddle.net/firecast/wNB8G/

下面是我确切问题的一个例子……在firefox上工作正常,但它不适用于Chrome.

解决方法根据我在Mac OS X上的测试,Chrome似乎不支持foreignObjects,至少不支持您所需的扩展名.我已经尝试过您的源代码,并从mdn中获取此示例：

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

<svg wIDth="400px" height="300px" vIEwBox="0 0 400 300"     xmlns="http://www.w3.org/2000/svg">  <desc>This example uses the 'switch' element to provIDe a         fallback graphical representation of a paragraph,if         xhtml is not supported.</desc>  <!-- The 'switch' element will process the first child element       whose testing attributes evaluate to true.-->  <switch>    <!-- Process the embedded xhtml if the requiredExtensions attribute         evaluates to true (i.e.,the user agent supports xhtml         embedded within SVG). -->    <foreignObject wIDth="100" height="50"                   requiredExtensions="http://www.w3.org/1999/xhtml">      <!-- xhtml content goes here -->      <body xmlns="http://www.w3.org/1999/xhtml">        <p>Here is a paragraph that requires word wrap</p>      </body>    </foreignObject>    <!-- Else,process the following alternate SVG.         Note that there are no testing attributes on the 'text' element.         If no testing attributes are provIDed,it is as if there         were testing attributes and they evaluated to true.-->    <text Font-size="10" Font-family="Verdana">      <tspan x="10" y="10">Here is a paragraph that</tspan>      <tspan x="10" y="20">requires word wrap!</tspan>    </text>  </switch></svg>

现在MDN示例的某些内容与Chrome不兼容是可行的,但对我来说,我只能在Chrome版本28.0.1500.71中获得文本后备渲染

你的xhtml嵌入是否在没有显示器的情况下在Chrome中工作：无？

更新

从我的测试中,如果删除requiredExtensions属性,则可以使上面的示例正常工作.显然这可能不是一个好主意,因为我的理解是该属性是为了确保用户代理可以正确呈现内容.但是,如果您的目标受众只是基于浏览器,那么您可以做出一个很好的假设,即UA将能够支持基本的xhtml.现在关于某些UA是否需要该属性来理解嵌入内容,这是一个不同的故事.

firefox和Chrome都支持使用正确的命名空间是可行的,这个答案可能很有趣：

<textarea> inside <foreignObject> handles as expected in Chrome but not Firefox

但是,看起来外来对象仍然会引起网络问题,所以它可能只是浏览器厂商需要改进他们的支持.

更新x2

到目前为止,我已经有了以下工作在firefox和Chrome现在看来,奇怪的是这个foreignObject;)

<!DOCTYPE HTML><HTML><style>svg {  position: relative;}.tooltip {  display: none;  position: absolute;  left: 0;  top: 0;  wIDth: 350px;  padding: 5px;  Font-size: 11px;  text-align: left;  color: rgb(0,0);  background: rgb(204,204);  border: 2px solID rgb(153,153);  border-radius: 5px;  text-shadow: rgba(0,0.1) 1px 1px 1px;  Box-shadow: rgba(0,0.1) 1px 1px 2px 0px; }svg:hover .tooltip {  display: block;}</style><body>  <svg wIDth="400px" height="300px" vIEwBox="0 0 400 300"       xmlns="http://www.w3.org/2000/svg">       <foreignObject ID="foo" height="700" wIDth="370" y="0" x="0">           <span xmlns="http://www.w3.org/1999/xhtml" >              <div><b>Comments</b></div>           </span>       </foreignObject>  </svg></body></HTML>

总结

以上是内存溢出为你收集整理的html – foreignObject display：block在chrome中不起作用全部内容，希望文章能够帮你解决html – foreignObject display：block在chrome中不起作用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1064789.html