Question

圆形边框不在IE中工作。我已经尝试将CSS3用于我的GWT网络应用程序，我正在努力将* .htc注入我的代码中。
如何通过GWT引用* .htc文件;

1.我尝试使用ClienBundle将其作为资源文件我从css文件中引用了它的相对路径。

这两种方式都无法帮助我。
有没有办法将CSS3与GWT一起使用？
是否有人使用带有GWT或GWT的* .htc还不支持CSS3？

的更新
我想要一个带有圆形边框的div：demo
我的项目结构是：

public class Css3 implements EntryPoint {
interface MyResources extends ClientBundle {
    @ClientBundle.Source("myHTCfile.htc")
    DataResource htcResource();
}

public void onModuleLoad() {
    final MyResources myResources=(MyResources) GWT.create(MyResources.class);
    final FlowPanel  roundedDiv =new FlowPanel();
    roundedDiv.setStyleName("myClass");
    roundedDiv.add(new Label("lorem ipsum dolor sit amet lorem dolor" +
            "sit amet lorem ipsum dolor sit amet "));
    roundedDiv.setSize("200px","200px");
    myResources.htcResource().getUrl(); //For what is this necessary?
    RootPanel.get().add(roundedDiv);
}

}
的 myResources.htcResource（）的getURL（）; //这有什么必要？

Css3.css

@url myHTCFile htcResource;

.myClass {
  behavoir: url(css3/myHTCFile);
  border-radius:10px;
  background-color:red;
  padding:10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

在此先感谢!!!

Answer 1

创建一个名为public的目录并将HTC文件放在那里：

src/
  - Module.gwt.xml
  - public/
       - myHTCfile.htc
  - other-directories/....

然后在CSS文件中，您应该能够在编译后引用HTC文件：

.cssClassName {
    behavior: url(/GWT_MODULE_NAME/myHTCfile.htc);
}

只需将GWT_MODULE_NAME替换为您的GWT模块的名称。

GWT中的公共目录是放置与GWT模块关联的静态资源的好地方。

Answer 2

未选中，但我认为这应该与ClientBundle一起使用：

Css文件：

@url myHTCFile htcResource;

.myClass {
  behavior: myHTCFile;
}

ClientBundle界面：

interface MyResources extends ClientBundle {

  interface Css3Resource extends CssResource {
    String myClass();
  }

  @Source("myHTCfile.htc")
  DataResource htcResource();

  @Source("Css3.css")
  publicy Css3Resource css3();

}

myHTCfile.htc和Css3.css文件必须与MyResources接口文件位于同一文件夹中。

编辑：

您还需要将css引用放在ClientBundle中，请参阅上面更新的MyResources。使用方法如下：

//Get instance
MyResources resources = GWT.create(MyResources.class);

//Make sure css is injected. This call needs to be done only once, more calls don't matter
resources.css3().ensureInjected();

//usage
roundedDiv.setStyleName(resources.css3.myClass());

可以删除行myResources.htcResource().getUrl();，因为它什么都不做。

Answer 3

您是否给过PIE？它似乎有一个非常好的行为库，用于将CSS3注入IE：

http://css3pie.com/

Answer 4

好的，因为目标是圆形边框 - 如何使用conditional CSS和一些maaaany tricks for achieving rounded corners（不涉及htc文件;））？您对所有酷炫和时髦的浏览器（以及IE9;）使用标准CSS3 border-radius，并对IE使用丑陋的黑客攻击;）

第二种解决方案：根据您的需求，DecoratorPanel可能是一个可行的选择。 javadocs说它只能在怪癖模式下“可靠地”工作，但他们知道什么，呃？ ;）但您可能想查看它的源代码，以获取有关如何实现自己的解决方案的指示：）

Answer 5

使用像css3pie这样的插件怎么样？ htc文件仅从css文件引用。服务器只需要能够处理该类型的文件。

如何将HTML组件文件（.htc）与GWT一起使用来应用CSS3？

5 个答案: