1

我用的是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()。本质上，它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 就会使你点击它时没有任何下拉菜单。

有没有人有自定义样式的选择下拉列表和无框阴影问题的解决方案？谢谢！

4

1 回答 1

0

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

于 2014-03-10T22:28:39.683 回答