我正在尝试将css3pie与Grails应用程序集成。根据指示,我所需要做的就是:
- 将PIE.htc文件放在服务器上的某个位置
- 将以下内容添加到每个相关的CSS规则
behavior: url(path/to/PIE.htc);
为了简化PIE.htc的路径计算,我将文件放在了web-app/js/PIE.htc
中。然后我定义了以下URL映射
"/PIE.htc"(controller: 'home', action: 'css3pie')
由动作处理:
class HomeController implements ApplicationContextAware {
private ResourceLoader resourceLoader
void setApplicationContext(ApplicationContext applicationContext) {
this.resourceLoader = applicationContext
}
def css3pie() {
log.debug "css3pie HTC file requested"
Resource pieHTC = resourceLoader.getResource('/js/PIE.htc')
response.contentType = 'text/x-component'
response.outputStream << pieHTC.file.text
response.outputStream.flush()
}
}
如果导航到http://summer-festivals.cloudfoundry.com/PIE.htc文件已送达,所以一切似乎都正常。然后,我将behavior
属性添加到一些CSS规则中,看看它是否有效,例如
.roundBottomLeft {
border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
behavior: url(/PIE.htc);
}
.roundBottomRight {
border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
behavior: url(/PIE.htc);
}
这应该是菜单的右下角和左下角,但如果你在IE8中查看主页,你会发现它不起作用。
我似乎在解决PIE.htc
文件的路径时遇到了问题,因为我在上面的css3pie
操作中设置了一个断点,但从未命中该断点。为什么通往PIE.htc
的路径没有得到解决。
根据文档,PIE只识别简写样式。所以您需要将border-radius和每个角的简写值一起使用,而不是单独的border-x-y-radius属性。
http://css3pie.com/documentation/known-issues/#shorthand
http://css3pie.com/documentation/supported-css3-features/#border-半径
试试这个,我刚刚修改了你的代码:
URLMappings.groovy
class UrlMappings {
static mappings = {
"/$controller/$action?/$id?"{
constraints {
// apply constraints here
}
}
"/"(controller:'home')
"500"(view:'/error')
"403"(view:'/login/denied')
"/static/PIE.htc"(controller: 'home',action: 'css3pie') // <== see here
}
}
HomeController.groovy
import grails.plugins.springsecurity.Secured
import org.springframework.core.io.Resource
@Secured("IS_AUTHENTICATED_FULLY")
class HomeController {
def grailsApplication
def index = { }
def css3pie() {
Resource pieHTC = grailsApplication.mainContext.getResource('css/PIE.htc') // <== see here
response.contentType = 'text/x-component'
response.outputStream << pieHTC.file.text
response.outputStream.flush()
}
}