保存 VML 和 CSS 标记

发布于 2024-09-13 12:05:06 字数 2358 浏览 7 评论 0原文

我正在使用 DD_roundies 在 Internet Explorer 中生成圆角。具有圆角元素的页面会经常加载，并且 roundies 脚本必须运行多次才能圆角并修复 png。这需要花费很多时间。该脚本生成一些放置在目标元素中的 VML 元素，以及注入到块中的一些 CSS。

我想保存 VML 和 CSS 以在页面加载时重复使用，这样我就不必每次都运行脚本。目标元素已经保存在数据库中，并在加载时通过 java 重新插入到 DOM 中。

我制作了一个测试页面，在 roundies 脚本运行后，我抓取了元素的 html，包括 VML、XML 命名空间和 CSS。我在 IE 中获取该块的 innerHTML 时遇到了一些麻烦，但我能够使用 IE 开发人员工具获取它，以便我可以测试它。获得各个部分后，我将它们放在一个单独的 HTML 文件中，看看它们是否能够正确呈现。我的测试没有成功。

这是第一个测试页：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript">
$(function(){
   DD_roundies.addRule('#block_1', '20px 20px 0 0', true);
   DD_roundies.addRule('#block_2', '0 20px 20px 0', true);
   DD_roundies.addRule('#block_3', '0 0 20px 20px', true);
   DD_roundies.addRule('#block_4', '20px 0 0 20px', true);
   $('#getContent').click(function(){
      var allHTML = $('#allContent').html();
      $('#captureContent').text(allHTML).val(allHTML);
   });
   $('#getStyles').click(function(){
      var allStyles = $('#allStyles').html();
      $('#captureStyles').text(allStyles).val(allStyles);
   });
});
</script>
<div id="allContent">
<script src="http://www.dillerdesign.com/experiment/DD_roundies/DD_roundies_0.0.2a-min.js" type="text/javascript"></script>
<style id="allStyles" type="text/css">
   .blocks{
      width: 150px;
      height: 100px;
      margin: 5px;
      border: 3px solid #999;
   }
</style>
<div id="block_1" class="blocks"></div>
<div id="block_2" class="blocks"></div>
<div id="block_3" class="blocks"></div>
<div id="block_4" class="blocks"></div>
</div>
<button id="getStyles">Get Styles</button>
<textarea id="captureStyles"></textarea>
<br />
<button id="getContent">Get Content</button>
<textarea id="captureContent"></textarea>

任何帮助将不胜感激，谢谢！

原文

I am using DD_roundies to generate rounded corners in Internet Explorer. The pages that have the rounded elements are loaded very often and the roundies script has to run many times to round corners and fix pngs. This costs a lot of time. The script produces some VML elements that are placed in the targeted elements, and some CSS that it injects into a block.

I want to save both the VML and the CSS to reuse when the page loads so that I don't have to run the script every time. The targeted elements are already being saved in a database and reinserted into the DOM through java at load time.

I made a test page where after the roundies script runs I then grab the html of the elements including the VML, the XML namespace, and the CSS. I'm having some troubles getting the innerHTML of the block in IE, but I was able to get it using IE developer tools just so I could test it. After getting the various pieces I placed them on a separate HTML file to see if they would render correctly. My test did not work.

Here is the first test page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript">
$(function(){
   DD_roundies.addRule('#block_1', '20px 20px 0 0', true);
   DD_roundies.addRule('#block_2', '0 20px 20px 0', true);
   DD_roundies.addRule('#block_3', '0 0 20px 20px', true);
   DD_roundies.addRule('#block_4', '20px 0 0 20px', true);
   $('#getContent').click(function(){
      var allHTML = $('#allContent').html();
      $('#captureContent').text(allHTML).val(allHTML);
   });
   $('#getStyles').click(function(){
      var allStyles = $('#allStyles').html();
      $('#captureStyles').text(allStyles).val(allStyles);
   });
});
</script>
<div id="allContent">
<script src="http://www.dillerdesign.com/experiment/DD_roundies/DD_roundies_0.0.2a-min.js" type="text/javascript"></script>
<style id="allStyles" type="text/css">
   .blocks{
      width: 150px;
      height: 100px;
      margin: 5px;
      border: 3px solid #999;
   }
</style>
<div id="block_1" class="blocks"></div>
<div id="block_2" class="blocks"></div>
<div id="block_3" class="blocks"></div>
<div id="block_4" class="blocks"></div>
</div>
<button id="getStyles">Get Styles</button>
<textarea id="captureStyles"></textarea>
<br />
<button id="getContent">Get Content</button>
<textarea id="captureContent"></textarea>

Any help will be greatly appreciated, thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一片旧的回忆 2024-09-20 12:05:12

第一个问题是，根据您使用的浏览器，您将获得不同的 CSS（这对您来说可能是显而易见的！）。 CSS3 圆角标准尚未稳定，在 Firefox、基于 Webkit 的浏览器（Safari、Chrome）和 Opera 上所需的 CSS 会有所不同。因此您需要使用不同的开发工具来获取CSS/VML。

在 Firefox 中使用 Firebug 你可以得到这个：

#block_1 {
  -moz-border-radius:20px 20px 0 0;
}

使用 Chrome 的开发工具你可以得到这个：

#block_1 {
  border-bottom-left-radius: 0px 0px;
  border-bottom-right-radius: 0px 0px;
  border-top-left-radius: 20px 20px;
  border-top-right-radius: 20px 20px;
}

如果我将你的例子简化为：

<script src="http://www.dillerdesign.com/experiment/DD_roundies/DD_roundies_0.0.2a-min.js" type="text/javascript"></script>
<style id="allStyles" type="text/css">
   .blocks{
      width: 150px;
      height: 100px;
      margin: 5px;
      border: 3px solid #999;
   }
</style>
<div id="block_1" class="blocks"></div>
<script type="text/javascript">
DD_roundies.addRule('#block_1', '20px 20px 0 0', true);
</script>

那么 IE8 开发工具给我：

<HTML XMLNS:DD_roundies = "urn:schemas-microsoft-com:vml"><HEAD>
<STYLE>DD_roundies\:* {
    BEHAVIOR: url(#default#VML)
}
#block_1 {
    ; BEHAVIOR: expression(DD_roundies.roundify.call(this, [20,20,0,0]))
}
</STYLE>

<STYLE id=allStyles type=text/css>.blocks {
    BORDER-BOTTOM: #999 3px solid; BORDER-LEFT: #999 3px solid; MARGIN: 5px; WIDTH: 150px; HEIGHT: 100px; BORDER-TOP: #999 3px solid; BORDER-RIGHT: #999 3px solid
}
</STYLE>
</HEAD>
<BODY style="POSITION: relative; ZOOM: 100%">
<ignore style="Z-INDEX: 0; WIDTH: 150px; HEIGHT: 100px; TOP: 15px; LEFT: 15px">
<DD_roundies:shape style="Z-INDEX: 0; POSITION: absolute; WIDTH: 150px; HEIGHT: 100px; TOP: 0px; LEFT: 0px" coordsize = "300,200" coordorigin = "1,1" filled = "f" fillcolor = "black" stroked = "f" path = " m6,40 l6,194 qy6,194 l294,194 qx294,194 l294,40 qy260,6 l40,6 qx6,40 e"><DD_roundies:fill></DD_roundies:fill></DD_roundies:shape><DD_roundies:shape style="Z-INDEX: 0; POSITION: absolute; WIDTH: 150px; HEIGHT: 100px; TOP: 0px; LEFT: 0px" coordsize = "150,100" coordorigin = "1,1" filled = "f" fillcolor = "none" stroked = "f" path = " m3,20 qy20,3 l131,3 qx148,20 l148,98 qy148,98 l3,98 qx3,98 l3,20 e"><DD_roundies:fill type = "tile"></DD_roundies:fill></DD_roundies:shape><DD_roundies:shape style="Z-INDEX: 0; POSITION: absolute; WIDTH: 150px; HEIGHT: 100px; TOP: 0px; LEFT: 0px" coordsize = "300,200" coordorigin = "1,1" fillcolor = "#999" stroked = "f" path = " m0,40 qy40,0 l260,0 qx300,40 l300,200 qy300,200 l0,200 qx0,200 l0,40 m6,40 l6,194 qy6,194 l294,194 qx294,194 l294,40 qy260,6 l40,6 qx6,40 e"><DD_roundies:fill></DD_roundies:fill></DD_roundies:shape></ignore>
<DIV style="POSITION: relative; ZOOM: 1; BEHAVIOR: none" id=block_1 class=blocks isImg="false"></DIV>
</BODY>
</HTML>

现在的工作是重新组合所有不同的 CSS/VML开发人员工具转储回单个 HTML 文件，希望不再需要 DD_roundies！或者，您可以信任 DD_roundies 来完成它的工作。就我个人而言，当简单的任务可以更好地完成工作时，我总是面临尝试更具挑战性的任务的危险！

The first problem is you will get different CSS depending on what browser you use (which may be obvious to you!). The CSS3 rounded corners standard have yet to stabilize, the required CSS will be different on Firefox, the Webkit based browsers (Safari, Chrome) and Opera. Therefore you need to use different developer tools to acquire the CSS/VML.

Using Firebug in Firefox you can aquire this:

#block_1 {
  -moz-border-radius:20px 20px 0 0;
}

Using Chrome's developer tools you can acquire this:

#block_1 {
  border-bottom-left-radius: 0px 0px;
  border-bottom-right-radius: 0px 0px;
  border-top-left-radius: 20px 20px;
  border-top-right-radius: 20px 20px;
}

If I simplify your example to so that it is only:

<script src="http://www.dillerdesign.com/experiment/DD_roundies/DD_roundies_0.0.2a-min.js" type="text/javascript"></script>
<style id="allStyles" type="text/css">
   .blocks{
      width: 150px;
      height: 100px;
      margin: 5px;
      border: 3px solid #999;
   }
</style>
<div id="block_1" class="blocks"></div>
<script type="text/javascript">
DD_roundies.addRule('#block_1', '20px 20px 0 0', true);
</script>

Then the IE8 Developer tool gives me:

<HTML XMLNS:DD_roundies = "urn:schemas-microsoft-com:vml"><HEAD>
<STYLE>DD_roundies\:* {
    BEHAVIOR: url(#default#VML)
}
#block_1 {
    ; BEHAVIOR: expression(DD_roundies.roundify.call(this, [20,20,0,0]))
}
</STYLE>

<STYLE id=allStyles type=text/css>.blocks {
    BORDER-BOTTOM: #999 3px solid; BORDER-LEFT: #999 3px solid; MARGIN: 5px; WIDTH: 150px; HEIGHT: 100px; BORDER-TOP: #999 3px solid; BORDER-RIGHT: #999 3px solid
}
</STYLE>
</HEAD>
<BODY style="POSITION: relative; ZOOM: 100%">
<ignore style="Z-INDEX: 0; WIDTH: 150px; HEIGHT: 100px; TOP: 15px; LEFT: 15px">
<DD_roundies:shape style="Z-INDEX: 0; POSITION: absolute; WIDTH: 150px; HEIGHT: 100px; TOP: 0px; LEFT: 0px" coordsize = "300,200" coordorigin = "1,1" filled = "f" fillcolor = "black" stroked = "f" path = " m6,40 l6,194 qy6,194 l294,194 qx294,194 l294,40 qy260,6 l40,6 qx6,40 e"><DD_roundies:fill></DD_roundies:fill></DD_roundies:shape><DD_roundies:shape style="Z-INDEX: 0; POSITION: absolute; WIDTH: 150px; HEIGHT: 100px; TOP: 0px; LEFT: 0px" coordsize = "150,100" coordorigin = "1,1" filled = "f" fillcolor = "none" stroked = "f" path = " m3,20 qy20,3 l131,3 qx148,20 l148,98 qy148,98 l3,98 qx3,98 l3,20 e"><DD_roundies:fill type = "tile"></DD_roundies:fill></DD_roundies:shape><DD_roundies:shape style="Z-INDEX: 0; POSITION: absolute; WIDTH: 150px; HEIGHT: 100px; TOP: 0px; LEFT: 0px" coordsize = "300,200" coordorigin = "1,1" fillcolor = "#999" stroked = "f" path = " m0,40 qy40,0 l260,0 qx300,40 l300,200 qy300,200 l0,200 qx0,200 l0,40 m6,40 l6,194 qy6,194 l294,194 qx294,194 l294,40 qy260,6 l40,6 qx6,40 e"><DD_roundies:fill></DD_roundies:fill></DD_roundies:shape></ignore>
<DIV style="POSITION: relative; ZOOM: 1; BEHAVIOR: none" id=block_1 class=blocks isImg="false"></DIV>
</BODY>
</HTML>

The job now is to recombine all the various CSS/VML developer tool dumps back into a single HTML file which hopefully won't need DD_roundies any longer! Alternatively, you could just trust DD_roundies to do it's job. Personally I'm always in danger of attempting the more challenging task when the simple one would do the job better!

回复收藏 0 原文

~没有更多了~