Question

我在Firefox和Safari中遇到了Flexbox兼容性问题。

我的弹性柱盒各占33％，应横向穿过屏幕。他们在IE和Chrome中这样做。在Firefox和Safari中，信息垂直向下显示在一列中。

我需要添加什么才能让它在Firefox和Safari中正确呈现？

这是我的jsfiddle： https://jsfiddle.net/huskydawgs/uy1wn9tu/4/

这是我的HTML：

var MapContainer = React.createClass({
map: null,
infowindow:null,
createMarker: function(place){
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
    map: this.map,
    position: place.geometry.location
    });
    google.maps.event.addListener(marker, 'click', function() {
    this.infowindow.setContent(place.name);
    this.infowindow.open(map, marker);
    });
},
componentDidMount: function(){
    var center = new google.maps.LatLng(this.props.locationProp.lat, this.props.locationProp.lng);
    this.map = new google.maps.Map(this.refs.map_canvas, {center: center, zoom: 15});
    var request = {
        location: center,
        radius: 500,
        types: ['restaurant']
    };

    this.infowindow = new google.maps.InfoWindow();
    service = new google.maps.places.PlacesService(this.map);
    service.nearbySearch(request, this.mapCallBack);

},
mapCallBack: function(results, status){
 if(status === google.maps.places.PlacesServiceStatus.OK){
    this.setState({resultsState: results});
    for (var i = 0; i < results.length; i++) {

        this.createMarker(results[i]);
    }
 },
 render: function(){
    return(
        <div className="mapAndListContainer">
            <div ref="map_canvas" className="mapCanvas">
            </div>
            <ListSorter propertyResults />
        </div>
        );
 }
});

这是我的CSS：

    <div class="container-3col">
    <div class="box-3col-1">
        <a href="http://www.apple.com"><img class="subcompact" height="116" src="http://www.onvia.com/sites/default/files/promo_thumb_sizing_up_116x116.png" width="116" /></a>
        <p><strong><a href="http://www.apple.com">Sizing up the $1.5 Trillion State & Local Contracting Market</a></strong></p>
        <p><a href="http://www.apple.com"><img src="http://www.onvia.com/sites/default/files/button_learn_more_116x30.png" width="116" height="30" /></a></p>
    </div>
    <div class="box-3col-2">
        <a href="http://www.ibm.com"><img class="subcompact" height="116" src="http://www.onvia.com/sites/default/files/promo_thumb_5_myths_about_competing_in_sled_116x116.png" width="116" /></a>
        <p><strong><a href="http://www.ibm.com">5 Myths About Competing in the State, Local and Education Government Market</a></strong></p>
        <p><a href="http://www.ibm.com"><img src="http://www.onvia.com/sites/default/files/button_learn_more_116x30.png" width="116" height="30" /></a></p>
    </div>
    <div class="box-3col-3">
        <a href="http://www.microsoft.com"><img class="subcompact" height="116" src="http://www.onvia.com/sites/default/files/promo_thumb_5_things_vendors_sled_116x116.png" width="116" /></a>
        <p><strong><a href="http://www.microsoft.com">5 Things Vendors Who Are Entering the SLED Market Need to Know</a></strong></p>
        <p><a href="http://www.microsoft.com"><img src="http://www.onvia.com/sites/default/files/button_learn_more_116x30.png" width="116" height="30" /></a></p>
    </div>
</div>

Answer 1

无法重现。在Firefox 42（Windows 7 x64）上，这些框为我显示。

根据caniuse.com，弹性框应该适用于所有当前和主流浏览器。

我在CSS中也找不到任何错误。您使用哪些浏览器版本进行测试？您是否安装了可能影响页面内容和/或样式的插件？

如何在Firefox和Safari中规范化跨浏览器Flexbox错误

1 个答案: