为什么会这样？

Question

我有一个图像（在示例中以绿色区域表示），该图像应该被屏蔽＆＃34;通过左侧的圆圈并垂直居中。它适用于Firefox和Chrome，但不适用于任何版本的IE（经过IE 11和Edge测试）。在IE上，显示图像的角落，即图像中应该被边框隐藏的部分。

这是小提琴（在Chrome中测试所需的结果）： http://jsfiddle.net/89j3mnj7/

＆＃13;

apply plugin: 'com.android.library'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.1"

    defaultConfig {
        minSdkVersion 15
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.1.1'
    testCompile 'junit:junit:4.12'
    compile 'com.parrot:arsdk:3.11.0'

}

＆＃13;

.left_circle {
  width: 40px;
  height: 80px;
  border: 4px solid red;
  border-top-left-radius: 200px;
  border-bottom-left-radius: 200px;
}
.image-mask {
  height: 80px;
  width: 150px;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  border-right: 0;
  display: table;
  overflow: hidden;
}
.image-container {
  display: table-cell;
  vertical-align: middle;
}
.image {
  background-color: green;
  width: 100px;
  height: 50px;
}

＆＃13;

Answer 1

为什么会这样？

不完全确定，如果您将元素推出容器overflow，则overflow似乎不会应用于border-radius截止的区域。仅当使用div将display: table;设置为像表格一样显示时，才会出现此问题。这可能不是一个错误，而是对规范的解释，因为Opera似乎以相同的方式运作。

如何解决？

从display: table;和display: table-cell;移除.image-mask和.image-container将允许overflow处理由border-radius隔离的区域，但{ {1}}将失去.image提供的垂直对齐方式。我们需要使用另一种方法来垂直对齐元素：

删除display: table;，因为不再需要
将.image-container添加到position: relative;，这样就可以.image-mask相对于它定位了
将.image，bottom: 0;，left: 0;，margin: auto 0;和position: absolute;添加到top: 0;，这将垂直居中于.image 1}}

＆＃13;

.image-mask.

＆＃13;

.left_circle {
  width: 40px;
  height: 80px;
  border: 4px solid red;
  border-top-left-radius: 200px;
  border-bottom-left-radius: 200px;
}
.image-mask {
  height: 80px;
  width: 150px;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  border-right: 0;
  overflow: hidden;
  position: relative;
}
.image {
  background-color: green;
  width: 100px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto 0;
}

＆＃13;

上述定心技术应该适用于IE9。如果不需要IE9，则可以使用flexbox实现居中：

＆＃13;

<div class="left_circle">
  <div class="image-mask">
    <div class="image"></div>
  </div>
</div>

＆＃13;

.left_circle {
  width: 40px;
  height: 80px;
  border: 4px solid red;
  border-top-left-radius: 200px;
  border-bottom-left-radius: 200px;
}
.image-mask {
  height: 80px;
  width: 150px;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  border-right: 0;
  display: flex;
  overflow: hidden;
  align-items: center;
}
.image {
  background-color: green;
  width: 100px;
  height: 50px;
}

＆＃13;

隐藏溢出，显示：Internet Explorer中的表和边界半径（所有版本）

1 个答案:

为什么会这样？

如何解决？