边界图像IE 8和IE 7的解决方法

I don't know if css is the best way to make this works... I have this image:

我不知道css是不是最好的方法来使这个工作...我有这个图像:

and I want all of my form to be inside of it. I have this aspnet.mvc 4 site, so I have this on razor:

我希望我的所有形式都在其中。我有这个aspnet.mvc 4网站,所以我在剃须刀上有这个:

<div id="form">
      @using (Html.BeginForm("Foo", "Boo", FormMethod.Post, new { @class = "form-horizontal" }))
      {
           //form here
      }
</div>

My layout:

<!-- container-->
<div class="main-content">
    <div class="container">
        @RenderBody()
    </div>
</div>
<!-- /container -->

CSS:

.main-content {
    padding: 20px;
    margin: 0;
    width: 100%;
}

.container {
    margin: 0 auto;
    width: 100%;
}

#form {
    margin: 0 auto;
}

.form-horizontal {
    max-width: 700px;
    width: 100%;
    background-color: #ffffff;
    font: bold 14px sans-serif;
    margin: 0 auto;
    border-width: 150px;
    border-style: solid;
    border-image: url(../../images/Iphone.png) 25%;
}

I have the expected result on chrome but not on IE 8/7 (of course)

我在Chrome上有预期的结果但在IE 8/7上没有(当然)

Is there any workaround for this? What is the best approach? PS: the form containt can grow up with some javascript, that's why I need to be "elastic".

这有什么解决方法吗?什么是最好的方法? PS:表格包含可以用一些javascript成长,这就是为什么我需要“弹性”。

@fordareh, I tryed your solution but it didn't work. I tryed this before cutting the image on 3:

@fordareh,我尝试了你的解决方案,但它没有用。我在切割3上的图像之前尝试了这个:

My idea was to simple repeat that "middle image" on Y position, but on both sides.. and I couldn't do it...

我的想法是简单地在Y位置重复“中间图像”,但是在两侧......我无法做到......

1 个解决方案

#1

The problem that you're going to have with this background image as a single image is that the glare on the face of the iPad prevents any part of it from repeating. I've created a similar effect to what you might be looking for using the css and images in this fiddle:

将此背景图像作为单个图像存在的问题是,iPad表面的眩光会阻止其任何部分重复。我使用这个小提琴中的css和图像创建了一个类似于你可能想要的效果:

https://jsfiddle.net/fordareh/1jzgk34f/

The trick is to isolate the top and bottom corners so that they don't expand since that would distort them. Then, you scale the middle slice so that it joins up nicely to the glare (with a filter hack that should work just fine in

诀窍是隔离顶角和底角,使它们不会膨胀,因为这会扭曲它们。然后,你缩放中间切片,使它很好地连接到眩光(使用过滤器黑客应该可以很好地工作

HTML:

<div class="top">
  <div class="bottom">
    <div class="middle">
      <div class="form-horizontal">

      </div>
    </div>
   </div>
 </div>

Css:

.top {
  width: 535px; 
  background: url('http://i.stack.imgur.com/WTrcf.png') no-repeat;
  padding-top: 55px;
}

.bottom {
  background: url('http://i.stack.imgur.com/65D0M.png') no-repeat bottom;
  padding-bottom: 55px;
}

.middle {
  background-image: url('http://i.stack.imgur.com/0N1JX.png');
  background-size: 100% 100%;
  overflow: auto;

  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
  src='http://i.stack.imgur.com/0N1JX.png',
  sizingMethod='scale')\9;

  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
  src='http://i.stack.imgur.com/0N1JX.png',
  sizingMethod='scale')"\9;

}

.form-horizontal {
  min-height: 400px;
  margin: 0;
  padding: 0 75px;
}

Images:

Alternatively, you could fix the height of .form-horizontal and set "overflow: auto" to simply force the form to scroll.

或者,您可以修复.form-horizontal的高度并设置“overflow:auto”以简单地强制滚动表单。

#1