css pie 仅适用于字段元素答案

【问题标题】：css pie not working on field elements onlycss pie 仅适用于字段元素
【发布时间】：2011-10-08 07:36:37
【问题描述】：

我用的是ie8，其他版本不知道。我到处都在使用馅饼，它通常可以正常工作。然而，我所有的表单输入元素都有一个盒子阴影和边框半径，没有边框（几乎所有的样式）。在 FF/Safari/Chrome 中一切都很好，但在 IE 中，表单缺少它们的 box-shadow。

我还使用这个（在咖啡脚本中）自定义了我的选择下拉字段

$.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()。本质上，它在原始<select> 下方附加了一个样式span，这将是新的菜单样式，同时仍使用原始<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 会使其在您单击它时不会出现任何下拉菜单。

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

【问题讨论】：

IE8 不支持边框半径，旁边你必须提供一些代码来获得帮助.. 或jsfiddle.net
很确定我在标题和前几句话中提到了css pie。
我有一种感觉，CSS3 PIE 不能将它的许多魔力应用到表单元素上。不过不要相信我的话。
它可以工作，只是不能正常工作，因为它隐藏在其他元素或其他东西后面。

标签： css internet-explorer css3pie

【解决方案1】：

应用“位置：相对；”到受影响的输入字段。

【讨论】：