css pie 仅适用于字段元素

Question

我用的是ie8，其他版本不知道。 我到处都在使用派，它通常工作正常。但是，我所有的表单输入元素都有框阴影和边框半径，并且没有边框(几乎所有样式)。在 FF/Safari/Chrome 中一切都很好，但在 IE 中，表单缺少它们的框阴影。

我还使用它(在 coffeescript 中)自定义了我的选择下拉字段的样式

$.fn.extend customStyle: (options) ->
  if not $.browser.msie or ($.browser.msie and $.browser.version > 6)
    @each ->
      currentSelected = $(this).find(":selected")
      $(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">' + currentSelected.text() + '</span></span>').css 
        position: 'absolute'
        opacity: 0
        fontSize: $(this).next().css("font-size")

      selectBoxSpan = $(this).next()
      selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css("padding-left")) - parseInt(selectBoxSpan.css("padding-right"))
      selectBoxSpanInner = selectBoxSpan.find(":first-child")
      selectBoxSpan.css display: "inline-block"
      selectBoxSpanInner.css 
        width: selectBoxWidth
        display: "inline-block"

      selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css("padding-top")) + parseInt(selectBoxSpan.css("padding-bottom"))
      $(this).height(selectBoxHeight).change ->
        selectBoxSpanInner.text($(this).find(":selected").text()).parent().addClass "changed"

并调用 $('select').customStyle() .本质上它附加了一个样式 span下方原文<select>这将是新的菜单样式，同时仍使用原始的 <options> , 同时隐藏原来的 select通过不透明度。

这些是我的sass风格

.customStyleSelectBox 
  +border-radius(4px)
  +box-shadow(0 1px 1px silver inset)
  +pie /*adds pie.htc behavior */
  position: relative
  z-index: 0
  width: 70px
  background-color: white
  color: #333
  font-size: 12px
  padding: 7px

这之前在 IE 中有效(至少 <select> 的样式正确并且确实显示出来了)，但现在不是了(现在是一堆完全白色的字段剪影，相互融合并进入下一个输入字段，不确定发生了什么变化。无论如何，如果它有效，z-index/positioning 会使它在您单击它时不会出现任何下拉菜单。

有没有人有解决带有自定义样式的选择下拉菜单和无框阴影问题的方法？谢谢!

Answer 1

应用“position:relative；”到受影响的输入字段。